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.
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.
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);
}
}
i need some help with the css properties of the responsive background, i add;
/* =Global
----------------------------------------------- */
homeContent {
height: 100%;
width: 100%;
background-image: url(http://mariovital.com/zaask/wpcontent/uploads/2014/05/fundo.png);
background-repeat: no-repeat;
position: relative;
margin: 0 auto;
}
#mainBG {
background-image: url(http://mariovital.com/zaask/wp-content/uploads/2014/05/fundo.png);
background-repeat: no-repeat;
no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;*/
}
also have the responsive css for the media
#media only screen and (max-width: 1024px) and (orientation:landscape) {
#mainBG {
background: url(http://mariovital.com/zaask/wp-content/uploads/2014/05/fundo.png) 50% 0 no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
#mainBG {
background: url(http://mariovital.com/zaask/wp-content/uploads/2014/05/fundo.png) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
#media only screen and (min-width: 0px) and (max-width: 767px) {
#mainBG {
background: url(blank.png) 75% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
i believe that everything its ok here... but is doesnt show on my web page what i doing wrong ?
http:/mariovital.com/zaask
any help will be apreciated !
thz in advanced
Your #mainBG has no dimensions. Try:
#mainBG {
position: absolute;
width: 100%;
height: 100%;
}