Background image

html-css

#1

Hey i was wondering how to you create a background image with out your background image being in your body tag someone please tell me how to do it i need help


#2

In your style.css file, add this somewhere near the top so it is self-evident immediately.

body {
    background-image: url(my_background_image.png);
    background-size: cover;
}

https://css-tricks.com/almanac/properties/b/background-size/

If it ends up you have multiple ‘body’ selectors, combine the rules into one.


#3

I don’t want it to be in the body


#4

That implies body, just not the tag itself (inline CSS) which the above reponse demonstrates clearly. If you wish to have a background image in some other part of the window, then be more forthcoming in your question. We are not mind readers.


#5

#6

can i make multiple of those because i need to make more than one


#7

In the above example, simply replace body with the selector of your choosing


#8

but can i make multiple background pictures is my question if i use that code


#9

Your question is not very clear. How do you mean, multiple backgrounds? Of course you can have several background images in separate containers. As for multiple backgrounds in one container, that will be difficult. The only real way would be to have nested containers, each with their own background and transparency so the ones lower down can show through.


#10

oh sorry what is the code to have multiple background images in separate containers


#11

Let’s say we have four sibling elements in a single wrapper (for grouping)…

<div id="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

All four have a common parent, #wrapper and can be located by traversing down the tree from there.

#wrapper > div {
    background-size: cover;
}
#wrapper > :nth-child(1) {
    background-image: url(my_background_image1.png);
}
#wrapper > :nth-child(2) {
    background-image: url(my_background_image2.png);
}
#wrapper > :nth-child(3) {
    background-image: url(my_background_image3.png);
}
#wrapper > :nth-child(4) {
    background-image: url(my_background_image4.png);
}

The direct child combinator is used so the rules only apply at the first level.


#12

#13

thanks!! that really helped


#14

do i have to put anything in the div that is in my html?strong text


#15

didn’t mean to do the strong text


#16

meant to do Do i have to put anything in the div that is in my html?


#17

You don’t have to, since it is your design.

We need a clearer picture of what you are attempting to develop to be able to speak any further. Up to now we have absolutely no context, only some vague questions. Given some idea of what you are actually working on, our responses will be equally vague. Can you help us along?


#18

Okay, let’s move into experimental mode…

Multiple Background Images

In it we see the above HTML and CSS played out in four screen divisions, 2 X 2. as accomplished by the #wrapper > div selector rules. There is currently no content in any of the divisions, only their backgrounds.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Background Images</title>
  <link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</body>
</html>

style.css (partial)

#wrapper > div {
    width: 49%;
    height: 300px;
    display: inline-block;
    background-size: cover;
    background-position: 50% 50%;
}

Take a look at the demo and ask any questions that arise, relating to it. Then we will have context from which to draw. In a later demo we will add content to the divs to show how that might look.


#19

it didn’t work no matter what I do it still doesn’t work


#20

Then someone else will need to step in. Perhaps you are trying to do too much before having any sort of proficiency under your belt? This is not something we can just step right into. We MUST learn the basics and all the rudiments of markup, presentation and behavior else every little task will be a major one.

We cannot learn this stuff by reverse engineering until we actually understand what we’re looking at. I suspect that to be the case here, and suggest taking a course, and completing it from beginning to end before going any further.