I want to get the background to be dynamic, proportionally re-size, and fill in the whole background instead of simply covering half of it like it is now on any mobile platform.
I'm an absolute novice at web design and am going through a merchant website. I thought I had figured out my website, but I completely forgot about mobile views so it is a mess in that area. I have tried media queries, viewport things, and more to no avail, so I feel like there was something default preventing them from working.
Website: http://www.reliefinsleep.com/
Thanks so much!
background-size: cover; will achive what you are looking for. This stretches the bg image to the size of the viewport cropping the edges rather that squashing it.
#media all and (max-width: 699px) { /* max-width would be the breakpoint for when this style kicks in */
body {
background-size: cover; /* stretches to size of viewport */
background-position: center; /* center the bg image */
}
}
You can also use percentage, pixel and em values for the background-size property. See MDN
Related
I uploaded a custom image to my WordPress site to use as a header background. I have it displayed using the following CSS:
.main-header-bar {background-image: url("image url");
background-repeat: no-repeat;
background-size: 100%;}
This allows the image to stretch the width of the screen even when the screen size changes.
The challenge I need help with is getting the height to adjust along with the width.
I think the issue is the height of the header area is defined by the font size chosen for the site title, the tagline, and the menus. To illustrate, when I move the browser window from a medium sized screen to a large one, my image size increases to match the size of the new monitor, but the font of the title, tagline, and menus remains the same. Because the height is now insufficient to contain the image now that it is wider and taller, it cuts off the bottom of the image.
Is there an elegant way to address this?
For reference, I am using the Astra theme.
Thanks!
UPDATE: I've done some more experimenting. I've discovered that the image is not actually "cut off" per se. The whole thing is there. However, on the larger screen, at the normal 100% zoom, the content of the page is displayed overlapping the image. If I zoom in, the image remains at 100% the width of the page while the title, tagline, menus, and content enlarge. The title expanding pushes the content down and the entire image becomes visible.
What I'd like is for the title and the header to be in sync with one another. Right now the image size is set relative to the screen size (100%), while the text size is set by a font. Is there a way to tie these to things together so there is a consistent appearance?
UPDATE:
I think I figured it out, mostly. I'm sure I'm doing something sloppily because I don't quite understand it all. By calculating a font size and using "vw" it makes the font size adjust based on the width of the screen instead of pixels. Since my header image also does that, it lines up (not perfectly, but it works between the screens I'm testing on well enough). Here is the code I added:
html { font-size: calc(0.75em + 0.5vw) }
.site-title {
font-size: calc(7.1vw)}
.site-description {font-size: calc(1.6vw) !important;}
.menu-item {
font-size: calc(1.8vw);}
How about trying it with a media query to satisfy the larger viewport.
.main-header-bar {
background-image: url("image url");
background-repeat: no-repeat;
background-size: 100%;
}
#media only screen and (min-width: 600px) {
.main-header-bar {
background-image: url("image url");
background-repeat: no-repeat;
background-size: cover;
}
}
I have a background-image in a fixed navigation bar and the same background-image in the main body of our website. The goal is to create the effect of the contents going under the navigation when the user scrolls like on this website:
http://bonobomusic.com/news.php
Here is the site I'm building where the problem is:
http://rattletree.com/wordpress2/
When I have the page at full width for my screen everything looks good, but when I resize the window then the background-image in the header is resizing at a different rate than the one on the body. This is the css I'm using for the header:
#main-header{
position:fixed!important;
background-image:url("img");
background-position-y: -62px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm seeing that the image in the header is scaling smaller and smaller in both the x and y axis the whole time, and on the background image it scales for a while on both axis but then at a certain point, it is only scaling horizontally and not vertically. Any help would be appreciated!
Please note: the problem is most obvious when viewing the page at different screen sizes-like a mobile device vs a computer.
Sorry I can comment so I post an answer.
The problem is that your header has a position with 30px in Y. The easiest way is to set the value to 0px.
Else you'll have to use a second background img for header by removing 30px of the original.
Set your header to full width then give the body and the header the same background image and options. Also make sure the background is centered.
Now add something like this. You will most likely have to remove some of the !importants.
#media screen and (max-width: 999px) {
body {
background-size: contain;
}
#main-header {
background-position-y: -30px;
}
}
I used http://quirktools.com/screenfly/ to check upon different screen sizes
Have you tried positioning absolute both the header and body and make them 100% width and height of the window. Then put the background image on both as cover. Then you can make a div that is positioned however far from the top as your header should be and give it overflow hidden.
I am building a single page site constructed of 4 divs, one on top of the other and each one with its own fixed background image. The images are much wider than the screen as I want to site to keep its look across a large range of screen sizes, however does anyone know how to truely center a background image. So in a small monitor they would be viewing the center of the image, and in a larger monitor they would see the same place of the image, just with more around it. Just like this site has
http://www.cantilever-chippy.co.uk/
When the window is resized the background image moves accordingly.
Many Thanks.
If you check the css from your link you see the solution:
#images #bg_1 {
background-image: url(images/bg/1.jpg);
background-position: 50% 0;
}
And the div:
<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>
By JavaScript they change the width of #bg_1 on every resize.
window.onresize = function(event) {
$("#bg_1").css("width", $(window).width());
}
This should work
#bg{
background-image:url(yourURL);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
The background-fixed property is for Firefox and Opera.
You're looking for the background-position CSS property.
http://www.w3schools.com/cssref/pr_background-position.asp
It can take an absolute offset in pixels (so if you know the size of your image and the size of the div you could calculate exactly where you want it to appear). Or, you can pass in a percentage. It can also take a negative numbers so you can offset it off the screen in any direction.
For your case, though, you probably want the simple "center" value. Something like this should work:
/* This should center the background image in the div. */
div.background_image_block {
background-position: center center;
}
So I have a div with a background image. I would like the background image to always be 100% on the screen no matter what the screen size is. I would like the image to grow in proportion but crop the height. I don't want the image to stretch. What I have so far is:
#banner {
background:url(../images/blurry.jpg) no-repeat;
width:100%;
height:520px;
background-size:100% 100%;
}
At the moment this is stretching the image to 100% and making the image look stretched.
Can anyone help me with this or point me in the right direction?
Use the CSS3 background-size property. Set it to cover. Like so:
background-size: cover;
Note that only IE9 and later supports this property value. IE8 will complain about an unsupported value. Chrome and Firefox supported cover since the past couple of years at least.
I cannot seem to get my background image to stretch vertically (with CSS) and have not been able to get it.. What's the best way to do this without using a jquery plugin?
http://realestateunusual.com/
Currently have
div#whitewrap {position:fixed; top:0; left:0; width:100%; height:100%;}
Although the question is unclear, I assume you want the houses to appear at the bottom of the page?
The body does not fill the screen unless it has to. Thus, your whitewrap div only fills 100% of the body.
Either you need to set the body height to 100% too (although this is slightly hacky) or set the background of the body to the image. This will then have the background image at the bottom of the screen (despite the body not being the full height - confusing right?).
Your HTML is hard to inspect however, due (I assume) to the software you used to create it adding in more divs than I thought possible!
EDIT: after closer inspection, it looks as if you need to set the background-position attribute to force the image to the bottom. Then, you can set the background-color to be the same as the colour of the sky at the top of the image. This should create the effect you desire without having to actually stretch & distort your image.
You can do this completely using CSS: using the background-size attribute.
body {
background-image: url(http://placekitten.com/250/150);
background-size: 100%;
}
See http://jsfiddle.net/5TSVP/.
You should look into Media Queries in your CSS and store different resolution images for major platforms. The images can then resize between with browser.
Media Queries: http://www.w3.org/TR/css3-mediaqueries/
#media (min-width:800px) { background-image: url(bg-800.jpg) }
#media (min-width:1024px) { background-image: url(bg-1024.jpg) }
#media (min-width:1280px) { background-image: url(bg-1280.jpg) }
CSS for img tag to let it resize:
img { max-width:100%; }