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");
}
}
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; } }
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.
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.
I'm trying to make a full screen responsive slideshow with Orbit ( foundation 5 ). I have problem with the background image, it's still fixed .
My code:
<ul class="example-orbit" data-orbit>
<li class="slide slide1"></li>
<li class="slide slide2"></li>
</ul>
html,body {
width: 100%;
height: 100%;
}
ul , li {
margin: 0;
padding: 0;
}
.orbit-container {
width: 100%;
height: 100%;
}
.orbit-container ul,.orbit-container .orbit-slides-container>* {
height: 100%;
}
.slide {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
}
.slide1 {
background: url('image-url') no-repeat;
}
.slide2 {
background: url('image-url') no-repeat;
}
How can i fix it ?
DEMO
Thanks.
add background-size to the class where you set the backgrounds:
.slide1, .slide2 {
background-size:100%;
}
Adding
.orbit-container .slide {
background-size: contain;
}
via the firebug console seemed to make it responsive.
guys,
I'm building this responsive website where i have footer at the bottom floating.
On my index.page (http://testi3.aada.fi/) my code works fine, but something is wrong with my content page () even i use same code for the floating footer..
can someone give my a hint how to fix this?
my floating code:
.container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -120px;
}
.container:after {
content: "";
display: block;
}
.site-footer, .container:after {
/* .push must be the same height as footer */
height: 120px;
text-align: center;
}
.site-footer {
background-image: url(../images/footer_bg_trans.png);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}
/ Mika
The CSS on your content page is not the same as the CSS on your index page. The CSS for .site-footer on the index page is:
.site-footer {
background-image: url("../images/footer_bg_trans.png");
background-position: center top;
background-repeat: no-repeat;
bottom: 0;
position: fixed;
text-align: center;
width: 100%;
}
Where as on the content page its:
.site-footer {
background-image: url("../images/content_footer_bg.png");
background-position: center top;
background-repeat: no-repeat;
margin-top: 10px;
text-align: center;
}
You're missing width: 100%; position: fixed; bottom: 0;