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.
Related
I'm having a problem with my layout when I set a background-image with CSS. I've looked through Google and SO but couldn't find someone with exactly the same problem, and none of the solutions applied.
What I'm trying to do is create a page with a background image that fills the entire height of the screen.
Consider this simple html page:
<html>
<body>
<section class="main-section">
<div class="my-div"></div>
</section>
</body>
</html>
In CSS I have two selectors:
.main-section {
background-image: url("../images/image-hero.jpg");
height:100vh;
}
.my-div {
width:500px;
height:500px;
border-style:solid;
border-color:white;
}
And it works fine, except when I resize the window. If the browser is resized to a value that is less than the div's width and height, scrollbars appear and the content is cut. Here's a 300kb gif that illustrates the behavior.
https://i.imgur.com/fS46akt.gif
I tried changing the height to % instead of vh, auto, tried messing with the minimum-height property using every possible value, tried using the background-size property, and setting different values to all these properties.
What I want to achieve is the following: the background image fills the entire height of the screen while keeping its original aspect ratio, it's ok if it overflows horizontally. When the windows is resized, the background image should resize accordingly (or not, it doesn't really matter) and if it becomes smaller than its contents, they should still be visible after scrolling, instead of cutting and showing white/empty space.
I think I'm missing something really obvious or I'm not using the background-image property as it's intended. Please help.
Add background-size: cover; to .main-section
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.
I want to make a panel with background image, which can be resized vertically. So the simple idea is to split actual image in three parts: header, body-repeat-part, footer. It looks something like this
<tr><td><div class='header'></div></td></tr>
<tr><td><div class='body'>whatever goes here</div></td></tr>
<tr><td><div class='footer'></div></td></tr>
.header {background:url(header.png); width:110px; height:20px;}
.footer {background:url(footer.png); width:110px; height:40px;}
.body {background:url(body-repeat.png); repeat-y; width:110px;}
So I slice my image which is 100x100 into three parts - header.png - 100x20, footer.png - 100x40, and body-repeat.png - 100x1
Everything works fine in Ie9 and firefox. And even chrome works fine with 100% zoom. However when I change zoom in Chrome the picture becomes jagged i.e. you could see it's "glued" from 3 parts. Apparently chrome scales differently these images.
So my question is - could this be fixed somehow? Or is there any way to make resizable panel with background image?
Many thanks for the replies.
You can try to force no paddings, borders and margins on that tables and divs, and then try to add the CSS3 background size property!
.header {
background-image:url(header.png);
background-size:110px 20px;
}
More about CSS Background size properties: http://www.w3schools.com/cssref/css3_pr_background-size.asp
It is better too try to avoid tables when making a layout structure :)
EDIT:
You can try too to add the
background-size: cover;
property on the full page background so the background image will fit 100% of the width and height of the given area.
A great and very complete tutorial about background-size: http://www.css3.info/preview/background-size/
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.
I've been given a design for a website, and am trying to implement it.
One problem I've run into is that the design has some background images (one for the header, one for the body, and one for the footer of the site) that are wider than the main content area of the site.
Simply putting them in as background images doesn't work, since expanding the header, body and footer divs enough to accommodate the backgrounds causes horizontal scrollbars to appear if the browser window is not big enough to fully show the backgrounds.
This is undesirable since the backgrounds are not really important for viewing the website, and I don't want scrollbars to appear for them (scrollbars should only appear once the browser is too small to completely show the content of the website).
The second technique is to have a separate, absolutely positioned div to show the header background image (and put it under an element with the browser window's size), and set its width to 100% so that it never exceeds the size of the browser window (and hence create scrollbars).
This works up to a point - however, when the window is too small, the background starts shifting around relative to the content since the "top center" position of the background is relative to the browser window, not the content area. At large sizes, these are effectively the same since the content area is centered, but at small sizes, only part of the content is shown, so the center of the content and the center of the browser window are different.
A good illustration of this problem that I've found is the Quicken website: http://quicken.intuit.com/. At large sizes, its cloud background looks fine, but if you make your window's width small enough, the clouds start shifting relative to the content (bad!).
Any ideas on how to fix this so that backgrounds images
don't create scrollbars since they are not part of the content of the site
are fixed relative to the content of the site (and don't shift around at small browser window sizes)
?
An ideal solution would be something like turning overflow to hidden on the body, but only for specified divs. Unfortunately I believe this is impossible.
I'd prefer a pure html/css solution, but I accept that I may need js to get the effect I want.
Thanks! (this is a complex issue, so if any clarification is needed, let me know)
UPDATE: Fixed this by setting min-width on the background div to the width of the content.
Set the min-width on the div containing the background image to the width of the content.
You need to have your header, content & footer have a width of 100%. And put the image in as a background image in these divs ... center it horizontally.
Inside the specific divs have a wrapper that is centered. and is the width of the content of them divs.
Like so.
HTML
<div id="header">
<div class="wrapper">
...
</div>
</div>
<div id="content">
<div class="wrapper">
...
</div>
</div>
<div id="footer">
<div class="wrapper">
...
</div>
</div>
CSS
div#header {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#content {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#footer {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div.wrapper {
margin: 0 auto; /* to center the div horizontally */
width: 960px; /* or however wide it should be */
}
Hope this helps.
Am I missing something, or should you be using the CSS background-image property?
I had a look at the Quicken site, and to be honest the cloud background image shifting when the browser is resized shouldn't be worried about unless your background-image is most distinctive than a bunch of clouds.
See what I mean?
You could use the overflow property and set it to hidden on the div that cause a scrollbars to appear.
I had the same issue on a site that I worked on, and come up with the following solution, which works well if all your background images are the same width.
/*
A container div that is set to the 100% width, with the overflow set to hidden.
This hides the overflowing images if the window sizes is too small
*/
#bg_container {
position:absolute;
z-index:0;
top:0px;
width:100%;
overflow:hidden;
}
/*
A div that sets the size of the content and centers itself on the page.
*/
.bg {
margin:0 auto;
width:1000px; /* content size */
overflow:visible;
}
/*
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px.
*/
.bg img {
margin-left:-250px;
}