.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>
Related
I am trying to make background-image of .panda_section_wrapper responsive. While it finally looks good on smaller devices, it is wrong on bigger ones. It's okey that it is stretched but I would like it to also stretch the height in this case, so Image looks good on small and big screens. How can I do this?
My site:
https://wandawix.github.io/online-zoo/index.html
My code:
https://github.com/WandaWix/online-zoo
<main class="main">
<!-- Panda section ---------------------------------------------------------- -->
<div class="panda_section_wrapper">
<!-- <div class="panda_circle">
</div>
<div class="writting">Watch<br>your<br><span style="color: #FFEE2E">favorite</span><br>animal<br>online</div>
</div>
<div class="btn btn_watch">
<button class="btn">Watch online</button>-->
</div>
.panda_section_wrapper {
/* max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 69vh;
background-size: 93vw; */
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh; /*min(max(16px, 80vw), 60vh);*/
background-size: 93vw;
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
background-size: 93vw;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-size: 100%;
background-size: 100% 100%;
}
.panda_section_container {
max-width: 1160px;
height: 100%;
margin: 0 auto;
}
.panda_circle {
position: relative;
width: 40vw;
height: 50vh;
left: 33%;
top: 0%;
background: linear-gradient(113.96deg, #F9804B 1.49%, #FE9013 101.44%);
border-radius: 50%;
}
Try using this:
.panda_section_wrapper {
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh;
background-color: pink;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
#media only screen and (min-width: 968px) {
height: 75vh;
}
}
And see if this works
The header on my website contains an image set as the background, with the HTML output as below -
<div id="header-container">
<div class="inner">
<h1>
<a title="Go home..." href="http://home_url">Blog title</a>
</h1>
</div>
</div>
The method works just fine, but I'm having issues with mobile devices as my header image is 432px wide.
Because of this I need to amend the code below so that the image reduces in size should the available width of #header-container .inner be less than the width ofthe background image.
I've tried several things, including using background-size: cover; and max-width, but I cannot seem to find a working combination.
How can I overcome this issue?
Here is a JS Fiddle showing the issue. Just reduce the size of the rendered view to see that the image does not shrink.
And here is the CSS that I am using -
#header-container .inner h1{
background: transparent url(res/title-white.png) no-repeat center left;
-moz-background-size: 432px auto;
-webkit-background-size: 432px auto;
background-size: 432px auto;
height: 85px;
margin: 0;
width: 432px;
}
#header-container .inner h1 a{
display: block;
height: 85px;
text-indent: -9999px;
width: 432px;
}
You should use background-size: contain, not background-size: cover, in combination with min/max-width.
Change your CSS like this.
#header-container .inner h1{
background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
background-size: contain;
height: 85px;
margin: 0;
max-width: 432px;
}
Sample snippet
#header-container{
background-color: #053525;
border-bottom: 1px solid #4DC386;
padding: 10px 20px;
position: relative;
width: 100%;
box-sizing: border-box;
}
#header-container .inner{
margin: 0 auto;
max-width: 1000px;
position: relative;
}
#header-container .inner h1{
background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
background-size: contain;
max-height: 85px;
margin: 0;
max-width: 432px;
position: relative;
}
#header-container .inner h1:before {
display: block;
content: "";
width: 100%;
padding-top: 20%;
}
<div id="header-container">
<div class="inner">
<h1>
</h1>
</div>
</div>
#media query might help here:
#header-container .inner h1{
background: transparent url(res/title-white.png) no-repeat center left;
background-size: 432px auto;
height: 85px;
margin: 0;
width: 432px;
}
#media (max-width: 432px){
#header-container .inner h1{
background-size: cover;
}
}
You can use media queries for mobile devices. Like:
#media all and (max-width: 540px){
#header-container .inner h1{
-moz-background-size: 260px auto;
-webkit-background-size: 260px auto;
background-size: 260px auto;
width: 280px;
}
#header-container .inner h1 a{
width: 260px;
}
}
You can force this by avoiding the background image altogether as you replace it with a regular image in the <img> tag. Layer containers of content (one with the image and another with text) on top of each other with absolute position and z-index. It's a workaround to the background image problems I've experienced similar to yours and the layers provide nice flexibility for managing content.
#z1 {
z-index: 1;
}
#z2 {
z-index: 2;
padding: 5%;
color: white;
}
#z1, #z2 {
position: absolute;
left: 0px;
top: 0px;
}
<div id="outer">
<div id="z1">
<img width="100%" src="http://www.verolago.com/blog/wp-content/uploads/2013/11/sailboat.jpg" />
</div>
<div id="z2">
<p>I'm on a boat!</p>
</div>
</div>
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);
}
}
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.