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
Related
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 am trying to display the full image in background. But! it's showing very strange behaviour.
It's taking only 60% of my screen. The rest of the screen takes white color. But when i am defining opacity attribute, then this opacity applies only on the rest of the 40% screen and image starting to display with opacity effect (but only in this 40% screen).
..
I have googled alot of times and applied alot of css tricks but it does not taking full screen with opacity.
..
Kindly help me!
css:
html, body {
height:100%;
}
body{
background: url(../..//images/background_pic.jpg) center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.8;
}
I found this way to solve your problem. Check this JSFiddle.
Style:
html, body {
}
.parent{
position:relative;
}
.background{
position:absolute;
background: url(http://farm6.static.flickr.com/5182/5613127636_e854aea66b_o.png) no-repeat center center fixed;
width: 100%;
height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.3;
}
.foreground{
position:relative;
}
HTML:
<div class="parent">
<div class="background"></div>
<div class="foreground">
Put text here.
</div>
</div>
Apply the background to html rather than body.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
profit website for an organisation.
this is the link www.notevayaslionel.com
Website is great in desktop however when you go mobile you can see that apparently the image in the background is bigger than the window screen and you can scroll sideways.
How con I solve this? I dont want any sideway scrolling.
This is my CSS:
/* Parallax Background ==================================================*/
#parallax {
height:100%;
width:100%;
top:0;
position:fixed;
background-image:url(https://trancazos.files.wordpress.com/2016/06/las-redes-sociales-a-messi-no-te-vayas-lio.jpg?w=1024);
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -100;
}
Add this to your styles . It will make your website responsive:
#centeralign iframe {
width: 100%;
max-width: 500px;
}
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;
}
Hi i'm trying to create a hero section that has a 100% width and height. I know there are many questions on this topic but none of them seems to be working for me. What I want to achieve is a section with an image and some text that is the first thing the user sees. When the user scrolls the rest of the website is shown.
When i run my code I get white bars around the image and i've tried to set margin to 0px nut i does not work.
Sorry for bad English.
This is some of my code:
HTML:
<section id="hero-section">
<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
</section>
</body>
CSS:
body, html{
height: 100%;
}
#hero-section{
background-image: url(../Images/Lake.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
Screenshot:
http://postimg.org/image/qsutt7d6n/
I tested here in my jsfiddle and worked correctly:
the HTML is the same:
<section id="hero-section">
<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
</section>
I changed the CSS, the background-image to background-color to test and add a "*" selector:
* {
margin:0;
}
body, html {
height:100%;
}
#hero-section {
background-color: red;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
See the sample here: http://jsfiddle.net/yv3vkqfw/