I collapsed with problem that devtools for mobile looks ok, but when I open project on iphone main image crashes and appeared only 1/4 of its size. Which properties I should add to make it adaptive on iphone?
Here is css code:
.main-page__background {
background-image: url("../../../images/main.jpg");
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
transition: opacity 0.4s;
background-color: #2a2c2f;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}
you could resize your image for mobile screens and make a copy of it, then change the background image in a media query.
#media(max-width: 400px){background-image: url("../../../images/new smaller image");}
Related
I'm working on this site on wordpress. Overall the design works well while viewed in mobile phones, But the header image doesn't resize along with the text which is over it.
"http://bodyinbalancenewyork.com/"
Is it caused because of css media queries? Help!
Below style is applied to the header image,
.vc_custom_1457453060838 {
margin-top: -60px !important;
border-bottom-width: 15px !important;
padding-top: 200px !important;
padding-right: 150px !important;
padding-bottom: 150px !important;
padding-left: 150px !important;
background-image: url(http://bodyinbalancenewyork.com/wp-content/uploads/2016/02/nyc-chiropractor.jpg?id=969) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
border-bottom-color: #020202 !important;
border-bottom-style: solid !important;
border-radius: 4px !important;
}
The problem is that using Javscript styles are being applied to the header and bootstrap is not used inside the header. That is why it is not responsive on the mobile phones.
Ive got this site I'm working on, trying to make it responsive, and so I have this div ID that appears once a certain width is met on a mobile device, here is the CSS
#mobilenavbuttons1 {
max-width: 750px;
padding-top: 20%;
height:0;
background: url("../../../images/productcatalog.jpg") repeat-x 0 0 / 100% auto rgba(0, 0, 0, 0);
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
padding-bottom:3px;
margin-bottom:4px;
text-align: center;
color: #fff;
}
This button shows up in every browser, even chrome, but when I open it in safari, its just empty where it should be. I try using the debug tool in safari and i can't even see the image background being loaded when I glance at the styles section of the debugger.
I've read tons of articles and posts on Stackoverflow about this but none of the solutions have worked. I've tried png, gif, quotes, no quotes (around the image), even putting the background size on another line and not in the same call as the image, nothing has worked. any thoughts?
Figured a solution, I think it has something to do with that backslash/format of how I wrote it on one line. this does the trick though:
#mobilenavbuttons1 {
display: none;
max-width: 750px;
padding-top: 20%;
height:0;
background: url("../../../images/productcatalog.jpg") rgba(0, 0, 0, 0);
background-size: 100% auto;
background-repeat: repeat x 0 0;
padding-bottom:3px;
margin-bottom:4px;
text-align: center;
color: #fff;
}
I read a lot about this topic the last days, but I didn't find a solution. I have two sprite sets, one with low quality for normal displays and one with high quality for retina displays.
My problem is, that my site has to be responsive, graphics should resize depending on the browser window. But with the background-size property, it seems that I can't tell the browser to resize the sprite. Here is what I got so far:
#logo-img {
max-width: 100%;
text-indent: -9999px;
height: 85px;
width: 360px;
background-image: url('/images/sprites-sa026cef942.png');
background-position: 0 -2609px;
background-repeat: no-repeat;
overflow: hidden;
outline: 0 none !important;
display: block;
white-space: nowrap;
}
#media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
#logo-img {
background-image: url('/images/sprites-retina-se61e802cf4.png');
background-position: 0 -2601px;
-webkit-background-size: 360px, auto;
-moz-background-size: 360px, auto;
-o-background-size: 360px, auto;
background-size: 360px, auto;
}
}
The HTML is
<a href="#" id="logo-img">
<h1>My logo text</h1>
</a>
Everything works fine, except on mobile devices, or when resizing the browser window. The logo gets cutted, and doesn't resize to the browsers window. I was playing with max-width: 100%; and height: auto; but this only effects the outlines, not the sprites within.
Hope anyone knows a solution. It doesn't have to be IE8 compatible, but it would be nice ;)
EDIT
Before using sprites, I used background-size: contain; to make sure, that the background image gets resized to the size of the element:
#logo-img {
background:url(../images/sprites-retina/logo.png) no-repeat center center;
background-size: contain;
max-width: 100%;
text-indent:-9999px;
height: 85px;
width: 360px;
overflow: hidden;
outline: 0 none !important;
display: block;
white-space: nowrap;
}
This worked well, but then I can't use a spritesheet. Maybe that makes it clear what I mean.
EDIT2
I made a fiddle http://jsfiddle.net/euvRD/2/
I think you need to remove the comma from the background-size lines and you might want to set the height to 85px as well:
-webkit-background-size: 360px 85px;
-moz-background-size: 360px 85px;
-o-background-size: 360px 85px;
background-size: 360px 85px;
But the comma is the main problem here, I think. Did that help you?
I have a CSS sprite image, footer1.png. I'd like to use CSS to crop out a section of the image, then tile the image as the background of my .headimg3 element.
I'm trying to use the clip and background properties to achieve this, but the image isn't be cropped.
.headimg3 {
background: url(footer1.png) bottom;
background-position: -35px -358px;
background-repeat: repeat;
height:34px;
overflow: hidden;
clip: rect(0px, 200px, 0px, 400px);
}
.headimgp {
padding: 8px 0px 0px 10px;
text-shadow: 2px 1px #fff;
}
<div class="headimg3">
<div class="headimgp">
LATEST Updates
</div>
</div>
How can I crop and tile a background image using only CSS?
The CSS clip property needs to have a position of absolute in order to function correctly.
.headimg3{
background:url(footer1.png) bottom;
background-position: -35px -358px;
background-repeat: repeat;
height: 34px;
overflow: hidden;
position: absolute;
clip: rect(0px, 200px, 0px, 400px);
}
Reference: CSS Clip Property and Demo
Note:
You can't use a section of any sprite image and have that section repeated because background-repeat is for the whole image.
In this case use a image editor and crop out the sprite you need and save it as a separate image file.
Is there any way to apply multiple background images using sprites?
something like the below code?
background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px
You can have multiple background images
see the EXAMPLE
Here is my css:
.sprite_box
{
background:
url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,
transparent;
height: 24px;
width: 81px;
margin:5px;
}
Read about sprite here
Here you can create sprite image
Here you create css for your sprite image
Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info
Yes, you can. The shorthand method is less verbose:
.sprite {
background:
url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
#ccc;
width: 160px;
}
Note that you can only state one background color, and you state it at the end of the declaration.
See it in aciton http://jsfiddle.net/TMHPh/