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;
}
}
Related
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.
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);
}
}
.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>
What would be the best way to combine these CSS elements?
As my web page grows I'm quite concerned about maintenance. There is not much difference between the below, apart from the bg image used, so I was wondering if there could be a way to make the code more maintainable.
#section3 {
background: url(../img/img2.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
z-index: 1;
}
#media only screen and (min-width: 0px) and (max-width: 768px) {
#section3 {
height: 30em;
}
}
#media only screen and (min-width: 769px) {
#section3 {
height: 50em;
}
}
#section5 {
background: url(../img/img3.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
z-index: 1;
}
#media only screen and (min-width: 0px) and (max-width: 768px) {
#section5 {
height: 30em;
}
}
#media only screen and (min-width: 769px) {
#section5 {
height: 50em;
}
}
#section7 {
background: url(../img/img4.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
z-index: 1;
}
#media only screen and (min-width: 0px) and (max-width: 768px) {
#section7 {
height: 30em;
}
}
#media only screen and (min-width: 769px) {
#section7 {
height: 50em;
}
}
I would suggest something like this Fiddle.
#section3 {
background: url(../img/img2.jpg) no-repeat center center;
}
#section5 {
background: url(../img/img3.jpg) no-repeat center center;
}
#section7 {
background: url(../img/img4.jpg) no-repeat center center;
}
#section7, #section5, #section3 {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
z-index: 1;
}
#media only screen and (min-width: 0px) and (max-width: 768px) {
#section7, #section5, #section3 {
height: 30em;
}
}
#media only screen and (min-width: 769px) {
#section7, #section5, #section3 {
height: 50em;
}
}
Perhaps you have also a look at LESS or SASS.