Background image not showing in nested divs - html

I'm having an issue where I my background image isn't showing in a specific circumstance, and when it does there are some issues.
<div id="indHeader">
<div id=" indImg">
content goes here
</div><!-- end of indHeader-->
</div> <!-- end of indImg-->
If I have the div ids swapped, the image shows as normal - the issue being it gets messed up when messing with the size of the page (the image reduces in size, but there is a growing margin like space above the image. The width remains 100%, but the height does not.) If I have it as it is in the above code, the background image does not show at all.
#indImg {
background-image: url("../images/index_header.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
}
Would there be a way to have the background show in the indImg div, or to not have it move when adjusting the size of the page? If I remove the background-size style, it somewhat fixes it but then the image does not fit 100% of the browser width. Adjusting background-position changes where the height changes, e.g removing the current property makes the image go to the top, not the bottom.
Image sort of showing what I mean.

Related

Problems positioning/resizing background image

I'm currently having difficulties in the header to resize/position a div with a background image.I did some google searches, but nothing really helped me..
The header has a logo, which is in a div called "header-left-section". On the top right of the logo, there is a navigation menu aligned within a div called "header-right-section". Those divs were already present in the theme.
We now wanted an image below the navigation menu and also on the right side of the logo. For that, I created a div tag "bottom-header-section" and set the image as the background image. Now I read several topics, that the background image doesnt show if there isnt a height and width set to it because therefor the div wouldnt have a size.
Now my problem is, that as soon as I make my browser window smaller, the div with the background image is set bellow the logo and menu, which I dont want at all.
This is my divs css code:
#bottom-header-section {
background-image: url('website/wertesystem/wp-content/uploads/2018/10/title-new.png');
float:left;
height: 120px;
width: 800px;
margin: inherit;
background-position: right bottom;
background-repeat: no-repeat;
}
With my understanding, now that I set the height to 120px and the width to 800px, this I set a fixed size to the div and as soon as I make the window smaller, the div keeps the same size but changes position because there isn't any more space on the same line as before right?
So what's the best way to align this div, on the right side of the logo and keep it responsive?
If you need a link to the website, please just tell me.
You can try to add something like this for the smaller breakpoint.
#bottom-header-section {
height: 65px;
width: 65%;
background-size: contain;
}
You might have to play with the height and width as it gets smaller.

CSS Background Image limits to content instead of entire page

So, I made a gradient image for the background of my site and since it didn't have much detail I figured I would take the image and use background-image and stuff with CSS to stretch it out over the page. However, the image refuses to stretch vertically the correct way. I can get it to stretch horizontally just fine, but no matter what I do, it will not stretch vertically to 100% on the page, and instead it limits itself to the content on the page, which I do not want. The only way I can get the picture to stretch horizontally without dead-setting the pixel length is by using cover, but then it becomes too tall. Can anyone give me a piece of code I can use to expand the image to fit the page horizontally and vertically? Because it refuses to and I don't know why
This is the CSS code I have in my style tags in the head
body {
background: url('Background.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
For starters background-repeat is set to no-repeat.
You need to make the body fill the browser no matter how much content it contains or it will only repeat as far as the content.
Edit:
Make the page fill the browser winder no matter what the content.
html, body { height: 100%;}

Resizing div to background image set to contain

I was wondering if someone could point me in the right direction. I have a div with a large background image. The BG image is set to contain so it will expand and contract with browser size. The issue I'm having is if you shrink the browser, the div still shows the height to 1000px. So while the image expands properly to fit, if you begin to scroll down you see the large gap that now occupies the 1000px height under the picture where the body bg color comes through (since the picture has shrunk via the contain). How can I make it so the div moves up and the gap disappears? I have seen this done on several sites.
CSS Code:
.contain { background-size: contain; }
.mainsplashtop {
width:100%;
height:1000px;
background-image:url(../images/main_splash.jpg);
background-repeat:no-repeat;
margin-top:0;
}
HTML
<div data-stellar-background-ratio="0.5" class="mainsplashtop contain"><a class="scroll" href="#destination1"></a></div>
You can see what I mean on the site (please disregard the disaray as its still in early development)
www.doyouhaveasaddle.com
Here are examples of what im trying to achieve.
http://www.unbornink.com/
http://www.fmolinari.com
Thanks in advance.

Difficulty tuning text placement on web page

I am having difficulty tuning the placement of text on my web page. Items on the page seem to float about and not lock down. I need them to stay static with respect to the background image.
For example, I have a div Item called "leftMenu" I want the left menu to stay approximately 20 pixels to the left of the background image. Things seemed to work until I had to center the background image. Now that the background image is centered, I seem to have lost the ability to lock down div positions with respect to the background.
When the screen is full size things look good, but when the page size is altered the leftMenu drifts all over the place. I'm currently going through a lot of trial and error using absolute and relative positioning, but I can't seem to get the right combination of settings to make the item stay put irrespective of the page size.
Page: http://107.22.173.10/
user: test2
pass: abc111
Any advice would be greatly appreciated.
Instead of using a big background taking a div of text and position it absolutely to the center, why not get a div that's exactly the size of the background image and center it using:
CSS:
html, body{
height:100%;
position:relative;
}
div.siteWrapper{
background: !VALUE;/* your background*/
padding: 0 0 0 0; /* the space top, right, bottom, left from the edge of the bg image to the content box of the image*/
width: !VALUE; /* width of your background - (left + right padding)*/
margin:100px auto; /* this will center your site horizontally and move it away from the top*/
}
HTML:
<body>
<div class="siteWrapper">
//everything in here
</div>
</body>
As per your requirement acc to me you have to create a wrapper div in which your whole stuff should be present and you need to use jquery/javascript to calculate the position from top, right, left, bottom of the wrapper to make it in center of the screen. For example lightbox of jquery. because when monitor size varies then resolution changes and the position of background image change according to that but content is set according to css set on the id/class on the elements.

What is wrong with this CSS?

I have the following CSS code:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
height:100%;
width:100%;
}
and the following HTML code:
<div class="yellow"> </div>
However, the div on the page does not have the image. You can see this by clicking on the blue "Logs Status" button (in the tab box) at http://cl58logs.co.cc/.
What's wrong with the CSS?
Your div is not large enough. Background images will not scale. If you want the image to scale, you'll have to use the img tag.
Also, note that height: 100% doesn't work in CSS, except for table cells.
The problem is that the div with the background image has almost no content (apart from a space character).
If you force the div to have a larger height, for example, by changing the CSS to this:
.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}
then your image appears
The height (437px) and width (700px) of the image is greater than the dimensions of your div. Set an appropriate height and width for your div to allow for the image to be shown.
Install Firebug to better inspect your HTML elements when you come across issues like this.
Since you're setting height and width to 100%, the amount of the image you see will depend on the divs containing the yellow class. Try changing the width and height on the status class and you will actually see your the bg image on yellow.