I'm having trouble nailing down a solution to this.
I have a div with a repeating background image that's 100% across the screen. So lets say:
.services_wrap {
width:100%;
height:200px;
background:url('../images/services_tile.png') repeat-x;
}
<div class="services_wrap">
//Content
</div>
How do I specify a media query that will scale that entire div down when the screen is resized, like for a normal div it would be:
#media screen and (max-width: 650px) {
/*Makes the logo shrink*/
#header {
height:auto;
}
}
But If I try this with .services_wrap nothing happens.
I have tried background-size: properties with no luck.
Is it possible to scale a repeating image?
Use background-size
div {
background: url("//www.placehold.it/50x50") repeat-x;
}
#media screen and (max-width: 900px) {
div {
background-size: 25px;
}
}
Demo
Related
I have been stuck on this problem for hours:
I'm trying to make the position of an image fixed when the window is resized to under 820px.
I need this because the image will overlap important text in the header (same color).
The CSS:
#banner {
background:url(path/to/image) no-repeat 100%;}
#media screen and (max-width: 819px) {
#banner {
background:url(path/to/image) no-repeat x y z;}
}
I have tried using '820px' and 'fixed', but this clearly does not work.
Try
#media screen and (max-width: 819px) {
#banner {
background:url(path/to/image) no-repeat x y z;}
z-index:-10;
}
Actually, adjust the z-index as needed
I have a responsive layout where the sidebar drop below the content in mobile.
In full width the list of items in the sidebar are at 100% width. So its like one item in one row...
In mobile I want 2 items in 1 row... by setting the width of each item to 50%. Not sure where I am going wrong...
DEMO: http://jsfiddle.net/nN6Zt/
#item {width:100%;background:#eeefff;}
#list_item{display:block;min-height:60px;border:1px solid #333}
#media only screen and (min-width:480px) and (max-width: 768px)
{
#item {width:50%;}
h1 {font-size:180%;line-height:120%;}
}
You have given 50% width to item, give it to list-item
Working Demo : http://jsfiddle.net/surjithctly/nN6Zt/2/
#item {width:100%;
background:#eeefff;
float:left;
}
#list_item {
width: 49%;
float: left;
}
49% to avoid breakage.
Or you can use box-sizing:border-box; as Tom mentioned.
#list_item {
width: 50%;
float: left;
box-sizing:border-box;
}
You have assigned the css for div but a doesn't have any css assigned to it....since your end child element is a a tag, its more semantic to assign a styling to it for all media queries use!
amend this s to your css for #media only screen and (min-width:480px) and (max-width: 768px) {} (or whichever was required to bring in the effects)
#item > a#list_item {
display:inline-block;
width:48%; /* to avoid any clash for breaking */
}
demo
I'd like my header image to scale with the browser size.
This is my current code for the att. screen grab, but this doesn't scale the image on smaller screens. Ive tried using the background image options but this doesn't achieve the look I want.
.header-image {
position:absolute;
top:0;
bottom:0;
max-height:1000px;
overflow:hidden;
left: 0;
right: 0;
z-index:-1;
border:10px solid #545351;
}
.header {
width: 100%;
padding-top:50px;
margin-top:-10px;
}
& HTML
<div align="center"><!-- big image -->
<div class="header-image"><img src="images/liveryHeader3.jpg"></div><!-- end of big image-->
</div><!-- end of center image class-->
The second image is roughly what shows on smaller monitor, the image hasn't scaled & layout looks odd - Id like to scale the horse head so that the full image still shows. It seems to work on Android & tablet, just not smaller monitors?
Just try this (It fits the size of the image so that it exactly covers the screen.):
.header-image img {
width: 100% !important;
}
Example: http://jsfiddle.net/leo/qsMKf/
Your image won't scale down with width:100%; it will only scale up so whatever the size is of the image it will stay. You need to use a "media query" and then set a different % there.
Something like:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* put your specific styling here either replacing the background image with something smaller using % or sized down via % */
}
input the id into div like this (use only one div)
HTML:
<div id="header"> </div>
CSS:
#header{
background-image:url(../images/liveryHeader3.jpg);
background-size: 100% 100%;
}
OBS: into background-size, the first value is to width and second is to height
for more information : http://www.w3schools.com/default.asp
code you provided doesn't scale image as it seen on screenshot, so you first should look at place where it is really stretched
anyway, check max-height:1000px; in css - this can limit, and of course you should add width:100%;height:100%; to your image and outer div as well
I hope i understand well what you really want.
You have to set max-width at 100% on your image and on it parent.
So your css for those element would look like this:
.header-image {
position:absolute;
top:0;
bottom:0;
max-height:1000px;
max-width:100%;
overflow:hidden;
left: 0;
right: 0;
z-index:-1; /*places header image behind text */
border:10px solid #545351;
}
.header-image img {
max-width:100%;
}
If you put the actual image into the css as a background element and then set background-size to contain it should make it fit to the exact screen size.
something like this:
.header-image {
position:absolute;
top:0;
bottom:0;
max-height:1000px;
overflow:hidden;
left: 0;
right: 0;
z-index:-1;
border:10px solid #545351;
background: url(*IMAGE URL HERE*) no-repeat;
background-size: cover;
}
See how that goes.
I have a simple bootstrap 3 page with a <div class="container"> for the body.
I would like to put a background image on the page, that best fits around this main container.
I can make images for each "responsive level" of bootstrap.
What is the best way to achieve this ?
Thanks.
Just use normal image background and design your background images so that graphics of the image follow the container width size (1170px lg container, 970px)...
body {
background: url('link/to/your/image_mobile.jpg') no-repat scroll center top;
}
#media (min-width: 768px) {
body {
background: url('link/to/your/image_tablet.jpg') no-repat scroll center top;
}
}
#media (min-width: 991px) {
body {
background: url('link/to/your/image_small_desktop.jpg') no-repat scroll center top;
}
}
#media (min-width: 1200px) {
body {
background: url('link/to/your/image_large_desktop.jpg') no-repat scroll center top;
}
}
Your background image would look somethink like this:
Is it possible in CSS to handle the position of a background image depending of the dimension of the browser page, or should I use javascript to handle that?
When the image is bigger than the page it should be aligned to the left
When the image is smaller than the page it should be aligned to the center
Media queries - they change CSS styles dependent on browser size.
#img {
width: 1000px;
margin: 0 auto;
}
#media
screen and (max-device-width: 1000px),
screen and (max-width: 1000px) {
#img {
float: left;
margin: 0;
}
}