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.
Related
I'm trying to get this CSS code to change the image background to a solid color for mobile (width:992px).
.herogirl{position:relative;width:100vw;height:70vh;display:flex;justify-content:left;align-items:center}.herogirl::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(/templates/assets/img/hero-header-lady.jpg);background-color: #b7b5b8; !important;background-repeat:no-repeat;background-size:cover;background-position:center center;filter:brightness(100%);border-radius:5px}
I've tried adding #media variables to several parts but no go.
.herogirl{background-color:#b7b5b8:#media screen and (min-width:992px);position:relative;width:100vw;height:70vh;display:flex;justify-content:left;align-items:center}.herogirl::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(/templates/CloudSave-child/assets/img/hero-header-lady.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center;filter:brightness(100%);border-radius:5px}
In the before definition put the background color to a solid color.
In a media query 992px, you put the background url
.herogirl {
position: relative;
width: 100vw;
height: 70vh;
display: flex;
justify-content: left;
align-items: center
}
.herogirl::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red !important;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
filter: brightness(100%);
border-radius: 5px
}
#media (min-width: 992px) {
.herogirl::before {
background: url(https://image-placeholder.com/images/actual-size/1600x1200.png);
}
}
in the code here I put a placeholder as image, and color red if under 992px
Don't forget to add in the beginning of your HTML, just under the following (in fact as you soon you play with box, media..., put it):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've added a snippet (I put a 90vh for the before otherwise in this snippet case, because relative-absolute, height 100% would compute to 0):
.herogirl {
position: relative;
width: 100%;
min-height: 100%;
}
.herogirl::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 90vh;
background-color: #333333;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-clip: content-box;
filter: brightness(100%);
border-radius: 5px
}
#media (min-width: 992px) {
.herogirl::before {
background-image: url(https://webhost.pro/templates/CloudSave-child/assets/img/hero-header-lady.jpg);
}
}
<div class="herogirl">
</div>
section {
position: relative;
width: 100%;
height: auto;
min-height: 500px;
padding: 40px 0;
color: #333;
font-size: 14px;
background-image: url("a.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-origin: content-box;
}
My css code but background starts at begining of website not under header? how can i solve problem
summary of problem
I'm trying to have a background image to cover the whole screen. This is my css (sass):
.html {
height: 100%;
}
.body {
height: 100%;
font-family: $font-sans-serif;
background: $white;
font-size: 16px;
line-height: 1.6;
color: darken(#ccc, 8%);
}
.masterhead {
position: relative;
width: 100%;
height: 100%;
min-height: 35rem;
padding: 15rem 0;
background: url(../images/bg_3.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
But the background does not have to total screen size. When I set ´position´ to ´fixed` it works but then I cant scroll to see the elements below it anymore.
What am I doing wrong?
You could just add it to the body.
For me it looks like you misstyped body with .body and html with .html.
. are definig styles for classes in css.
https://www.w3schools.com/cssref/sel_class.asp
html {
height: 100%
}
body{
height: 100%;
font-family: $font-sans-serif;
font-size: 16px;
line-height: 1.6;
color: darken(#ccc, 8%);
width: 100%;
height: 100%;
min-height: 35rem;
background-color: white;
background-image: url('http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png');
background-repeat: no-repeat;
background-size: cover;
}
While styling you shouldn't use '.' for default html tags.
Only classes should be having (a full stop) '.' before their names.
you should probably use
body{height:100%;}
and not this unless you have a class name 'body'
.body{height:100%;}
I have a problem with display property on mobile. Display: none doesn't work at all. I'm using SASS. This is my code:
main {
display: none;
}
#media(min-width: $mobile-breakpoint) {
main {
height: 800px;
display: flex;
background-color: inherit;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-image: url("./images/main.jpg");
}
}
Use display: none within the mobile breakpoint.
Example:
#media(min-width: $mobile-breakpoint) {
main {
height: 800px;
display: none;
background-color: inherit;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-image: url("./images/main.jpg");
}
}
I am currently having issues with Safari not displaying background images and background colors in my css. Apparently its just the homepage.
#footer {
background-color: #00594c;
}
#home_widget_1 {
background-color: #00594c;
color: white;
height: 485px;
border-right: 1px solid white;
background-image: url(https://www.fvcolumbus.org/stage/wp- content/uploads/2016/12/independent-living1.png);
background-size: 510px 282px;
background-repeat: no-repeat;
margin-right: 0px !important;
background-position: center top;
}
#home-featured-image {
height: 540px;
width: 100%;
display: block;
max-width: 1280px;
margin-right: auto;
margin-left: auto;
background-image: url(../stage/wp-content/uploads/2016/10/10192016_homepage.jpg);
background-repeat: no-repeat;
}
Apparently I had caching issues.