I have the following CSS:
#section-one {
background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-pointers.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
#media all and (max-width: 800px) {
#section-one {
background: url('http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/section-one-880px.jpg') !important;
}
}
Now I was expecting this to change the background image when the browser width is <=800px
Nothing actually changes though, but if I right click and view image when the browser is below 800px width, it actually shows me the 800px width image?
Strange, why is this happening and how do I fix it? Here is the link should you need it:
http://176.67.174.179/ukcctvinstallations.co.uk
The only other CSS I have for #section-one I have is:-
#media all and (max-width: 880px) {
/* Section 1 */
#section-one {
margin-bottom: -49px !important;
}
}
you can create a picture in the standard sizes of screen like section-one.jpg (1440x900) and then use this code for your #section-one :
#section-one{
min-width:974px;
min-height:510px;
background:url(section-one.jpg) no-repeat bottom center fixed transparent;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
height:100%;
width:100%;
image-rendering:optimizeSpeed
}
Please try this code
#media only screen
and (max-width :800px) {
#section-one{
background: url(section-one.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
}
}
Related
I have a 4496x3000 image I am using for a background image. It's responsive until it get down to about 1190px at which time it's not. I thought maybe creating a media query and using a smaller image would help but it did not. What is wrong with my code that makes it stop being responsive?
body, html {
margin: 0;
padding: 0;
width: 100%
}
.bgimg {
width: 100%;
background-image: url(../img/pexels-photo-Original-4496x3000.jpeg);
opacity: 0.65;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #464646;
}
#media only screen and (max-width : 1190px) {
.bgimg {
background-image:
url(../img/pexels-photo-medium-1280x854.jpeg);
}
}
<body class="bgimg">
I tried the code without media query and it worked well i.e. made my background image responsive. You should try using another (bigger) image and without using media query.
The website has a section, which has a background image. In the desktop website to make it look good, background image was made fixed so that it can have parallax effect. But in the mobile website, parallax does not make sense. So I wanted to remove the fixed in the mobile view. Here is the code I have tried.
<section class="girl-cover-photo">
</section>
.girl-cover-photo {
height: 730px;
background: url("../img/girl-cover.jpg") fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px) {
.girl-cover-photo .girl-cover-photo {
background: url("../img/girl-cover.jpg") relative;
}
}
But somehow the parallax shows up in the mobile view. Any pointers on what to do to fix this?
instead background: url('../img/girl-cover.jpg') relative;
use background: url('../img/girl-cover.jpg') scroll;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
.girl-cover-photo{
height: 730px;
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px){
.girl-cover-photo{
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') relative;
}
}
<div class="girl-cover-photo"></div>
Try this
I am using Ionic and Angular to build mobile Applications.
I am now using Ionics sidemenu with a background:
.menu.menu-left {
background-image: url('../img/menu_background.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
The Application can run on different screen sizes from smpartphones over tablets to desktops so i need to provide different image sizes.
Do i have to provide an image for each display size or can i somehow resize the background image on startup and set the resized version to be the background?
You could try #media css to display different image per view. For example:
#media screen and (max-width: 1199px) {
.menu.menu-left {
background-image: url('../img/menu_background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
}
#media screen and (max-width: 767px) {
.menu.menu-left {
background-image: url('../img/menu_background_2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
}
Or you could just set correctly your css for the background like that:
.menu.menu-left {
background-image: url('../img/menu_background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
I've a big image to fit in the middle of a login screen. It shows ok with IE10 and Chrome. But it doesn't show anything on Firefox (36.0.1).
#media screen and (min-width: 401px) {
body {
background: url("../../Content/images/Eplod Login DrillBit.png") center no-repeat #2b984b;
background-size: auto 90%;
-moz-background-size: auto 90%;
-webkit-background-size: auto 90%;
background-origin: content-box;
}
}
#media screen and (max-width: 400px) {
body {
background: url("../../Content/images/Eplod Login DrillBit.png") center no-repeat #2b984b;
background-size: 600px;
-moz-background-size: 600px;
-webkit-background-size: 600px;
background-origin: content-box;
}
}
I don't know where I'm doing wrong. In the Mozilla Developer Network it shows the way of using background-size; I've put every elements individually rather than short hand. But nothing working and I'm now puzzled. For screen size bigger than 401px doesn't show any image. But for screen 400px or smaller it shows the image but wrongly.
It seems to me that you want this.
html {height: 100%;}
body {
min-height: 100%;
background: url("http://globe-views.com/dcim/dreams/camel/camel-06.jpg") center no-repeat #2b984b;
background-origin: content-box;
}
#media screen and (max-width: 400px) {
body {
/* -moz-background-size: 90% auto;
-webkit-background-size: 90% auto; */
background-size: 90% auto;
}
}
#media screen and (min-width: 401px) {
body {
/* -moz-background-size: 600px;
-webkit-background-size: 600px; */
background-size: 600px;
}
}
What I did:
Turned the values around: set a responsive, percentual width on small window sizes (max-width: 400px) and a fixed size on larger screens. Though I would recommend setting the break-point to the size of your background-size. (Give or take a few pixels)
Moved shared properties into body outside a media query
Changed the values of background-size in the first media query: first comes the width: 90% and then comes to height: auto. The background image will thus always be 90% of its parent with an automatic height.
Put the prefixed lines (browser specific) before the un-prefixed lines (W3C standard) as you should. Browsers should always use the latest implementation of technology, which in cases like these are the un-prefixed ones. Background-size is widely supported, though, so I don't think you need any prefixes at all.
Thank you #Bram Vanroy. Your solution actually worked after changing couple of things. Here are the codes worked for me.
html {
height: 100%;
}
body {
max-height: 90%;
background: url("../../Content/images/Eplod Login DrillBit.png") center no-repeat #2b984b;
background-origin: content-box;
}
##media screen and (min-width: 401px) {
body {
background-size: auto 90%;
-moz-background-size: auto 90%;
-webkit-background-size: auto 90%;
background-origin: content-box;
}
}
##media screen and (max-width: 400px) {
body {
background-size: 600px;
-moz-background-size: 600px;
-webkit-background-size: 600px;
background-origin: content-box;
}
}
I have an image background for a div that I want to show on different devices, The problem is that I have to give height of the image in order to fit it correctly. Now on different phones, I have to adjust the height with different px. forexample on iphones 65px works for portrait mode but not for landscape and etc. Is there a way that the div just gets resized in height to cover 100% of the background image?
here is my code
<style>
div.testing {
height: 95px;
background-image: url(/myimageurl);
background-repeat: no-repeat;
background-size: 100%;
}
#media screen and (max-width: 320px) {
/* iphone portrait */
div.testing {
height: 65px;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
/* iphone portrait */
div.testing {
height: 80px;
}
}
</style>
<div class="testing"> </div>
You could use background-size: cover;
.thing {
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;
}
but why are you using a background-image? if you can use a regular image, you could do it like this:
.thing {
width: 100%;
max-width: [your biggest width];
}
.thing img {
display: inline-block;
width: 100%;
height: auto;
}
ALSO
I would recommend flipping your mindset on the max-width and start small screen first, using min-width and getting bigger.
And you don't really need div.testing - it can just be .testing
And if you are using a background image for a good reason... you should investigate making the div -
.thing {
height: 0;
padding-bottom: 30%; /* play with this */
}
This will keep the proportions... but it's only useful in specific cases.
A complete jsfiddle with an actual image would be useful.
Good luck!
Nest your div inside the background div and set the height to 100%