I am creating a responsive design for my site.
I have a display logo like this:
<h1>example.com</h1>
and I show the logo in CSS:
#header h1{
margin-top:23px;
background: url(http://www.example.com/files/logo.jpg) no-repeat !important;
float: left;
text-indent: -9999px
}
I have now created a new CSS file for mobile visitors and responsive design.
#media (max-width: 480px) { ...
How do I achieve that the logo is re-sized according to width of user's phone/browser? I discovered background-size property but haven't succeeded in using it.
Thank you
Try
header h1 {
background: url(http://www.example.com/files/logo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I am designing a webpage, which has a background image fixed, and i have a problem with it in mobile view. like, In desktop view, its perfectly alright. whereas, in mobile view, the image is too blurred and it is not good looking. i couldn't find where i have made mistake. I have attached images of both the views and my code for background image here.
Desktop:
Mobile:
My CSS:
body
{
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #ffffff ;
background-image: url(images/cover3.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
You can use media query and change background-image or use background-size: cover;
use this
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
background: none;
}
this fill fit a background for the screen size
Add
background-position: center;
background-size: cover;
.jumbotron{
width:100%;
height:50vh;
background: url('longboard.jpeg');
color:white;
}
I'm trying to build a "jumbotron" from scratch. Currently the html for it is just a with nothing in it. As of right now the picture simply cuts off on the right side while my navbar scales downward. i would like the background picture to also shrink with it. How do I go about doing this?
Also whenever I add a or anythign to the div a margin appears above my navbar which I didn't thing was connected. Sorry in advance if i broke any posting etiquette, this is my first post on here.
Maybe try this:
.jumbotron {
background: url('longboard.jpeg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 50vh;
width: 100%;
overflow: hidden;
color: white;
}
Resource - https://css-tricks.com/perfect-full-page-background-image/
The simplest way is to set the background size to "cover"
.jumbotron {
background-image: url('longboard.jpeg');
background-size: cover;
height:50vh;
color:white;
}
I have been working on a solution to the problem with no luck. I have a set of background images, a full size set for desktop and a mobile optimised set of images.
Now when I run the following code on Chrome on the desktop and resize the browser to activate the #media then everything runs great and looks correct. But when I then go to test on safari on the IPhone I just get a blank spot where the background image should be.
<meta name="viewport" content="width=device-width, initial-scale=1">
section.box_park {
min-height: 500px;
background: url('/images/sample-park.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
section.box_building_management {
min-height: 500px;
background: url('/images/building-management.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media only screen and (max-width: 420px) {
section.box_building_management {
background: url('/images/mobile-building-management.jpg') no-repeat center center fixed;
}
section.box_park {
background: url('/images/mobile-sample-park.jpg') no-repeat center center fixed;
}
}
Any idea why this is happening?
* UPDATE *
If I comment out the #media it will display the background images but obviously not the mobile optimised ones.
I want to have a responsive screen height background image as shown in this site http://www.flavorplate.com/. I did research on google and github on that technique but wasn't able to find anything.
Basically you can do something like this:
<div class="bg-image">
<!-- Featured Content absolute -->
</div>
<div class="content-wrap">
<!-- More Content -->
</div>
html {
height:100%;
}
body {
height: 100%;
}
.bg-image {
background: url(../img/background.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
.content-wrap {
heigth: auto;
min-height: 600px;
}
For conditional loading of background-images, you have to use media queries or/and javascript or a plugin like this: https://github.com/M6Web/picturefill-background
Well, it's incredibly easy, try this:
background: url(../IMAGES/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* For mobile devices */
#media only screen and (max-width: 767px) {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background: url(images/background-photo-mobile-devices.jpg);
}
}
You want some more comprehensive Ideas?!! check this out;
Background Full
im using parallax effect together with background-size: cover;. There's no problem when the screen res is +1090px, but if it's smaller, background image starts to hide under the bottom div.
Here is my css code for the bg img.
#bg6 {
background: url(../../../images/para/6.jpg) center bottom no-repeat fixed;
height:400px;
width:100%;
position:relative;
z-index:-1;
margin:0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Im looking for a way to limit the background-size: cover; to stop scaling after it reaches overall width 1090.
UPD1 - http://jsfiddle.net/G7F7L/2/ FIDDLE LINK
UPD2 - 1 of the solutions I found myself.
#media only all and (max-width: 1298px){
#bg6 {
background: url(../../../images/para/6.jpg) center bottom no-repeat fixed;
height:400px;
width:100%;
position:relative;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size:auto;
background-size: 1298px auto;
z-index:-1;
margin:0;
padding: 0;
}
}
It's kinda messy, but it does the job. After getting under 1298px, background stops stretching.
Is this what you are looking for?
http://jsfiddle.net/JyeA9/1/
background-size:100% auto;
I have done some parallax stuff and have run into the same issues. The one issue with a stretch background in parallax is as the image gets smaller you have to adjust your divs with media queries, else it messes up the image-size to div ratio.