I have a picture size: 240px/240px. This size of picture must be only on wide screens, on mobile this picture must be 80px/80px.
What I have ever tried:
.picture{
height:100%;
min-height: 240px;
background: url("../../img/picture.png") no-repeat;
background-size: cover;
background-position: 50% 50%;
}
#media screen and (max-width: 480px) .picture {
height: 80px;
transform:scale(.3);
}
But this scale parents block, bg scaled wrong, exactly right, but that's not what I need. It's just crops bg-picture.
If you're trying to set fixed background image, this is example to scale and align your background image:
.pic-wrap {
display: block;
height: 296px;
background-image: url(https://pbs.twimg.com/profile_images/590966305248784384/1gX6-SY6_400x400.jpg);
background-size: 256px;
background-position: 20px 50%;
background-repeat: no-repeat;
padding-left: 296px;
border: 1px solid #ddd;
}
#media only screen and (max-width: 320px) {
.pic-wrap {
background-size: 96px;
height: 126px;
padding-left: 126px;
}
}
<div class="pic-wrap">
<span class="label">Test</span>
</div>
You are missing {} brackets for media query:
.picture{
height:100%;
min-height: 240px;
background: url("../../img/picture.png") no-repeat;
background-size: cover;
background-position: 50% 50%;
}
#media screen and (max-width: 480px) { /* here */
.picture {
height: 80px;
transform:scale(.3);
}
} /* here */
try this-
.picture{
height:100%;
min-height: 240px;
background: url("../../img/picture.png") no-repeat;
background-size: 100% 100%;
background-position: 50% 50%;
}
#media screen and (max-width: 480px){
.picture {
height: 80px;
min-height: none;
transform:scale(.3);
}
}
Related
My background image won't show. I provided a photo of my directory just in the case below
image directorydirectory
/*Moto G4, Galaxy S5*/
#media only screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.game {
width: 360px;
height: 640px;
background-image: url(img/mario.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
Just add ' ' in background-image: url('img/mario.jpg');
/*Moto G4, Galaxy S5*/
#media only screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.game {
width: 360px;
height: 640px;
background-image: url('img/mario.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
I have a problem with background-attachment property. Namely I used it on desktop, but it also appears on mobile. Why is that? Here is my code:
main {
height: 800px;
background-color: inherit;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-image: url("./images/main.jpg");
#media only screen and (max-width: 768px) {
background-attachment: initial;
height: 800px;
}
}
EDIT: Updated code
main { height: 800px; background-color: inherit; background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: initial; background-image: url("./images/main.jpg"); #media only screen and (max-width: 768px) { background-attachment: initial; height: 800px; } }
Please can someone help me. I have created a website which uses background images. It was working fine a few hours ago but not there seems to be a problem with the way they resize.
If you go here http://culturesmartbooks.co.uk/regions/asia.php it is working fine.
However, on the page http://culturesmartbooks.co.uk/regions/australasia.php, when browser is above 1024px the background image disappears.
Here is the HTML for the Asia page:
<div class="asiaHero">
<div class="caption">
<h1>Asia</h1>
<img src="../images/logoBlue.png">
</div>
CSS:
.asiaHero {
background-image: url("../images/asiaHero.jpg");
height: 1000px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.asiaHero .caption {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background: rgba(0,0,0,0.2);
height: auto;
padding: 0.5%;
}
.asiaHero .caption img {
width: 200px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
.asiaHero .caption img {
width: 300px;
}
}
/* md */
#media (min-width: 992px) {
.asiaHero .caption img {
width: 400px;
}
}
/* lg */
#media (min-width: 1200px) {
.asiaHero .caption img {
width: 500px;
}
}
#media screen and (max-width: 1024px) {
.asiaHero {
background-attachment: scroll;
max-height: 650px;
background-position: top;
}
.asiaHero .caption {
top: 50%;
}
Australasia:
<div class="australasiaHero">
<div class="caption">
<h1>Australasia</h1>
<img src="../images/logoBlue.png">
</div>
CSS:
.australasiaHero {
background-image: url("../images/australasiaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.australasiaHero .caption {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background: rgba(0,0,0,0.2);
height: auto;
padding: 0.5%;
}
.australasiaHero .caption img {
width: 200px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
.australasiaHero .caption img {
width: 300px;
}
}
/* md */
#media (min-width: 992px) {
.australasiaHero .caption img {
width: 400px;
}
}
/* lg */
#media (min-width: 1200px) {
.australasiaHero .caption img {
width: 500px;
}
}
#media screen and (max-width: 1024px) {
.australasiaHero {
background-attachment: scroll;
max-height: 650px;
background-position: top;
}
.australasiaHero .caption {
top: 50%;
}
I cannot see why Asia would display and Australasia would not. Please can someone help
why did you write the css inside media? http://prntscr.com/f1ugsz
remove media and write the styles as default and it will work fine.
Hi,
like i said it in the title background-image:none; is not working since with css3 background-image:url('...'); return a new layer each time the file is new. i'm trying to remove image as my media query change the background size.So i was wondering what was the workaround that. Can any one help?
#splashHeader div.headerSplash{
height: 254.5px;
width: 100% ;
display: block;
background: none ;
background-image: url("/static/woman350.jpg");
background-position: center;
background-size: auto 254.5px;
background-repeat: no-repeat;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media all and (min-width: 640px) {
#splashHeader {
background-color: initial;
padding: 0;
position: relative;
background: none ;
background-size: 350px;
background-image: url('/static/woman500px.jpg');
background-repeat: no-repeat;
background-position: right top;
background-size: auto 350px;
}
}
#media all and (min-width: 768px) {
#splashHeader{
background-color: initial;
padding: 0;
position: relative;
background-size: 350px;
background: none;
background-image: url('/static/woman600px.jpg') ;
background-repeat: no-repeat;
background-position: right top;
background-size: auto 350px;
}
}
#media all and (min-width: 960px) {
#splashHeader .innerSection{
height: 500px;
background: none;
background-image: url('/static/woman_maximumSize.jpg');
background-color: initial;
padding: 0;
position: relative;
background-size: auto 500px;
background-repeat: no-repeat;
background-position: 70px 0px;
}
}
the imge that is stiking is the one with the one with background-position: right top;
It works just fine out of the box, your error must be somewhere that you haven't shown us.
div {
background-image: url('http://jsfiddle.net/img/logo.png');
background-color: black;
width: 125px;
height: 23px;
margin-bottom: 10px;
}
div + div {
background-image: none;
}
<div></div>
<div></div>
Do not use background: none in your CSS.
The reason is that, background: none makes all the background properties as none.
May be because of this your other background properties are failing to work.
Just remove the background: none CSS from everywhere and try to run the code.
.logo {
background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
background-size: 100%;
}
#media(max-width:767px) {
.logo {
background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
background-size: 50%;
background-repeat: no-repeat;
}
}
<div class="logo"> </div>
I can't work out why this doesn't work - any ideas why the image doesn't render?
HTML:
<div class="logo"> </div>
CSS:
.logo {
background-image: url(../img/logo_white.png);
background-size: 100%;}
#media(max-width:767px) {
.logo {
background-image: url(../img/logo_white.png);
background-size: 50%;
background-repeat: no-repeat;}
}
Any help greatly appreciated
Try this...
#media screen and (max-width:767px)
First of all, you syntax was wrong. Secondly, at least in the code you provided, your div was zero size. See how it works:
.logo {
display: block;
width: 99%;
height: 400px;
border: solid 1px red;
background-image: url('http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/10/mountains.jpg');
background-size: 100%;
}
#media only screen and (max-width: 767px) {
.logo {
background-size: 50%;
background-repeat: no-repeat;
}
}
<div class="logo"></div>
But is it that you want for responsive design? Probably you misunderstood the meaning of background-size: 50%; property?
Uhm mate, heres a simple one: give your wrapper some height.
.logo {
background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
background-size: 100%;
width: 100%;
height: 100px;
}
#media(max-width:767px) {
.logo {
background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif);
background-size: 50%;
background-repeat: no-repeat;
}
}
<div class="logo"> </div>