I'm not a coder but have some basic knowledge and have been editing a template. The site is almost there - on desktop it looks fine but on mobile the cover image doesn't scale down.
I've tried changing the size from 100%, auto and cover, played with vw and vh etc, but still can't get anything to work.
Here's the CSS:
.intro {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: auto;
-o-background-size: auto;
}
If anyone can help that would be great! the site is adammillsmusic.com
Thanks!
For Responsive Images do the following in .intro class
intro {
max-width: 100%;
height: auto;
display:block;
padding: 0;
text-align: center;
color: #333;
background: url(../img/intro-bg.jpg) no-repeat center top;
background-color: #e5e5e5;
background-size: contain;
-webkit-background-size: contain
}
Key changes
max-width: 100%;
height: auto;
display:block;
Hope this helps
You are prefixing properties different values :
-webkit-background-size: cover; : On webkit (Chrome & co), cover the background
background-size: auto; On other browsers, do not cover
This is probably why you see a covered background on your desktop and having unexpected results on a mobile browser.
body {
display: table;
height: auto;
width: auto; /* 100% originally */ .
padding: 0;
text-align: center;
color: #333;
background: url(//placecage.com/200/200) no-repeat center top;
background-color: #e5e5e5;
background-size: cover;
}
Set your max-width to 100% like this:
max-width: 100%;
Thanks for your help - this did solve the problem. Though now after seeing the result, I think maybe it would be wiser to call a smaller size image through the use of '#media' for the mobile site. The only problem is in my code editor when I try to do this it doesn't seem to recognise the '#media' tag and treats it like /* */
Any thoughts?! Thanks
#media screen and (max-width: 600px) {
.intro {background-color: #e5e5e5;
background: url(../img/Bg-mountain-small.png) no-repeat center top;
}
Related
So i am making a basic website.
Everything works fine when i open it on the desktop, but when i open it on my iphone, the background image of the body, does not "cover" the container.
What am i doing wrong here ? (i added the background-attachment: scroll on mobile devices after reading solutions on stackoverflow but did not work).
Here is an image of what is happening :
This is how it looks on desktop :
This is how it looks on mobile.
Here is my css :
#font-face {
font-family: rubikCustom;
src: url(Rubik-Regular.ttf);
}
html, body {
height: 100%;
width: 100%;
min-height: 100%;
}
.navbar {
background-color: #FFF;
}
.navbar-nav > li{
margin-left: 15px;
margin-right: 15px;
}
#home {
background: url(home_back_blur.png) no-repeat center center fixed;
display: table;
height: 100%;
min-height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* background-attachment:scroll */
#media only screen and (max-width: 480px) {
#home {
background-attachment:scroll;
}
}
#full-height-cont {
height: 100%;
width: 100%;
}
.landing-text {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
font-family: rubikCustom;
}
background-size: cover means that the background will always grow to "cover" the entire div.
on desktop, your div is landscape orientation (the width is longer than the height). on mobile, it happens to be portrait orientation (the width is shorter than the height). you can verify this by adding something like border: 1px solid red to #home.
there are two possible solutions: at mobile sizes change the element's height, or change the background-size property
I am making a simple landing page and am trying to get the following image to be the background fullscreen: image
My CSS currently looks like this:
body {
background-image: url('/images/bg.jpeg');
width: 100%;
height: 100%;
position: fixed;
}
A majority of the image is getting cut off, what's the best way to remedy this?
Thanks !
Did you tried this :
body {
margin:0;
padding:0;
background: url('/images/bg.jpeg') no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
Heres a cool idea for a landing page. The background, being fixed is a popular cool way for landing pages. Please, to see this properly, click "Full Page" on the top right after clicking run code snippet.
#import url(https://fonts.googleapis.com/css?family=Lato:300);
div:nth-child(1){
background-image: url(https://images.unsplash.com/photo-1431538510849-b719825bf08b?q=80&fm=jpg&s=6fd7a983e3b43e66d2b6062856b9df66);
height: 750px;
width: 100%;
background-size: cover;
background-attachment: fixed;
}
div:nth-child(2){
height:400px;
width: 100%;
background-color: black;
z-index: 1;
}
h1{
text-align: center;
color: white;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
padding-top: 300px;
z-index: 0;
text-shadow: 0 0 2px black;
font-size: 50px;
}
<div>
<h1> Michael Barreiro </h1>
</div>
<div></div>
Because of the height/design of this company's logo we created an header image that includes it. That header image is located here:
http://tinyurl.com/oqkpvff
Anyone know how to make that header image resize automatically for mobile/smaller tablet?
#title-container {
background-image: url("url of our image is here") !important;
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
}
I did try height: auto but that didn't work either.
You can use the background-size: contain;
Demo
#title-container {
background-image: url("http://tinyurl.com/oqkpvff");
background-position: left top !important;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
height: 250px;
max-width: 100% !important;
position: relative;
background-size: contain;
}
contain
This keyword specifies that the background image should be scaled to be as large as possible >while ensuring both its dimensions
are less than or equal to the corresponding dimensions of the
background positioning area.
I have a very large image to use as a background image. Because the image is so large, I have divided it into three images that can be stacked one on top of the other.
I'm putting the images in as background images with the property "cover":
<div class="screen" id="header1"></div>
<div class="screen" id="header2"></div>
<div class="screen" id="header3"></div>
css:
#header1
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
max-height: 949px;
background: url('images/bg1_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
#header2
{
background-color: #000;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 947px;
background: url('images/bg2_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;padding: 0;
margin: 0;
}
#header3
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
background: url('images/bg3_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
The problem is that the pattern in the background image doesn't line up.
How do I make multiple background images line up no matter how wide the screen is?
So... there's a few things going on here with this:
1st question : You haven't done anything to make the div's overlap in your CSS, so they are going to appear just one after the other in the document flow of the browser. For example, view this fiddle here:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
}
div:last-child {
background: blue;
}
If you want them to all overlap perfectly, aka to be superimposed, then they need to be positioned absolutely on top of each other, like this:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:last-child {
background: blue;
}
The other question is why you would break a large background image into 3 smaller images. We refer to that as image slicing, which is really not optimal. It takes 3 http requests instead of one to retrieve that image, which is more overhead than just getting the smaller one quite often. Also, it's a background image, so it won't prevent the document from fully loading until the image has loaded, as an inline image would.
Hope this helps.
I’m building my own child theme, based on the BuddyPress default theme. I need to have a background image that’s stretched 100% width/height. It works fine in Chrome and Firefox, but in the latest version of IE, the image just sits in the center, at its original size. No stretching takes place. Here is the CSS I’m using, which is just an augmentation of the parent theme (BP default theme):
body {
background-color: #000000;
background-image: url(images/DSC09005cc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #555;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 170%;
max-width: 1250px;
margin: 0 auto;
width: 95%;
}
Thank you in advance.
Dima
IE9+ supports the CSS3 background-size:cover feature but IE8 and lower does not. If you're trying to fix this for IE 8 and lower I might suggest something like:
HTML:
<body>
<img src="images/DSC09005cc.jpg" class="fit-background">
...
CSS:
img.fit-background {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) {
img.fit-background {
left: 50%;
margin-left: -512px;
}
}
...
You could place the image in an IE conditional statement if you want to hide the image from browsers other than IE 6, 7 and 8:
<body>
<!--[if lt IE 9]>
<img src="images/DSC09005cc.jpg" class="fit-background">
<![endif]-->
...
Here's the original link if you want to read more about it and a couple of other options: http://css-tricks.com/perfect-full-page-background-image/