I have a series of 'slides' on my website that work fine on a 1080p monitor, but do not scale at all on a phone/tablet. I've already tried a few different methods, not of which have worked.
http://pelicancottage.com.au has the images as they currently are, and here is the css for one of the 'slides'
#slide1{
background:url('../img/slide2.png') 50% 0 no-repeat fixed;
color: #fff;
height: 800px;
margin: 0;
padding: 200px 0 260px 0;
background-size: cover;
}
Have you tried using the css media queries? This allows you to customize your layout depending on your screen-size as well as your device (an explanation of this is here-> http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries).
try this
but for a phone you better change background. Can't go from 16:9 to whatever a phone uses.
#slide1 {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Related
I have an SVG image and it just doesn't display the way I want.
This is the CSS code I'm using :
.container-background {
min-height: 25vh;
background-image: url("svg-image.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-bottom: 1px solid #e9e9e9;
I also tried object fit contain / cover / every other option. I just can't get it to display right. I need it to cover the whole container.
Any ideas how to achieve this ? I ran out of options.
Try setting background-size:contain, min-height:100vh and background-size:50% (you can remove background size if you like or adjust the percentage to get it covering just right for your design).
.container-background {
min-height: 100vh;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-size: 50%; // remove this or tweak to ajust the fill amount
border-bottom: 1px solid #e9e9e9;
}
jsfiddle: https://jsfiddle.net/so099hnt/1/
Your CSS is functioning correctly, cover takes up 100% of the space maintaining the aspect ratio of the image so any excess gets cut off.
Background contain
If you would like to display the whole image then you should be using contain.
Fiddle
https://jsfiddle.net/7uca5x64/1/
Stretched background using inline image
If you would like it to take up 100% of the width and height without keeping it's aspect ratio then add it in as an inline image, but this would require a format other than SVG. You could then use absolute or fixed positioning to make it look like a background image.
img {
height: 100%;
width: 150%;
position: absolute;
left: -20%;
z-index: -1;
}
Fiddle
https://jsfiddle.net/7uca5x64/5/
Stretched background using inline SVG
If you have to use SVG, you will have to inline it into the HTML and then you can control it via CSS. You will also have to add preserveAspectRatio="none" to the SVG.
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
Fiddle
https://jsfiddle.net/7uca5x64/6/
When I use background-size: cover; it causes the image to scale larger to fit the screen. This scaling means the background image doesn't match the dimensions from the psd file I'm trying to replicate. How do I keep the responsiveness that background-size: cover; provides, while maintaining the exact measurements from the psd? Thanks a lot for any help.
html:
<body>
<div class="bg-img"></div>
</body>
css:
.bg-img {
position: absolute;
background: url(../images/site-bg.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
background: url(../images/site-bg.jpg) no-repeat center center;
?
If your intention is to have the background image be able to grow to the maximum 'natural' size of the source image and then not be scaled any larger, this would likely have to be achieved through some combination of media queries (testing both portrait, landscape and square window sizes at various sizes), CSS, or JavaScript.
You could consider using a max-width and/or max-height attribute, along with top: 0; bottom: 0; left: 0; right: 0; margin: auto;. This may yield acceptable results, though it may be that JavaScript is where you would need to look for the most reliable result.
I am trying to use the technique described as technique #2 at the following URL:
http://css-tricks.com/perfect-full-page-background-image/
to set a web page background image that shrinks in size when the window is resized.
My HTML is as following
<div class="bg">
<img src="images/bg.jpg" alt="">
</div>
And my style definition is as following.
.bg {
z-index: -1;
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
This works perfectly when the image is smaller than the screen and it needs to be sized up.
But in case of shrinking a big image, it doesn't work and I just get a huge image centred on my screen.
I need my image to be able to shrink, cover the entire background, preserve aspect ration.
I cannot use body bg or whatsoever because I need to be able to change the image in a slideshow.
EDIT:
I HAVE to have the HTML structure as <div><img/></div>
EDIT 2:
The reason I cannot change the structure (or at least that's what I think) is that I am using script at:
http://malsup.github.com/jquery.cycle.all.js
to cycle several images, and that script doesn't allow me to change anything of the way the HTML is structured. If anyone knows how to use it with background images or suggest a totally different script that would be much appreciated.
If you have to use <img> tags to produce the image, simply delete the height declaration from your CSS; the image should maintain aspect ratio and resize appropriately if you just have width specified. (Alternatively you could specify height and delete width as well, but specifying width is the industry norm.
For a CSS background method, try this, instead:
.bg {
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-clip: border-box;
background-origin: padding-box;
-moz-background-size: cover;
background-size: cover;
}
It requires CSS3, but will work in somewhat-old browsers (-moz-background-size is for FF3.6; FF4+ uses the default background-size). This method uses the CSS background-image property which is preferred to your method.
The reason for this is that the background image is not part of the meaningful content of your site page, but rather part of the styling (it's a background image, so it belongs in the background). Therefore, it should be handled using Cascading Style Sheets.
Remove all the styles from your .bg div and apply the following styles to your img tag.
.bg img {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
}
P.S. Since you are going to use this as a slideshow, I would suggest you to change the class .bg to .slideshow so that it's semantically meaningful.
I am having issues making the sprite I have resize, when I resize browser window.
The remiander of the template is repnsive including the Nav Menu.
The sprite remains fixed and sticks out of the page when resizing.
How would I make it size like the rest of the template (removing the width scroll bars)
If you just remove the sprite everything displays correctly.
I have created a Fiddle but its not showing the when I click results.
I have uploaded the page to here:
Test Page
Thank you.
Perfect Solution I have Got U can Use
I have used This solution
And It works Fine on all browser except Android Browser
.playerSp
{
display: block;
background: url(blue_sprite.png) no-repeat;
}
.next-button
{
background-position: -83px -6px;
width: 41px;
height: 46px;
}
var abc=(screen.availHeight+screen.availWidth);
$( window ).resize(function() {
var aaa=($(document).height()+$(document).width());
scale=abc/aaa;
$('#playerContainer').css({ 'zoom': (1/scale), '-moz-transform': 'scale('+(1/scale)+')', '-moz-transform-origin': '0 0 ' });
});
</script>
So I was stuck with the same question and noticed the answer was not yet given here.
Here is the answer:
I've managed to make my sprite fully responsive. For this I didn't use any slicing (photoshop) or javascript. Also notice how the sprites are positioned absolute and yet still responsive according the background.
For a better understanding of this process, please see the following link: http://brianjohnsondesign.com/unlisted/demos/responsivesprite/
Also see my link in order to see how it looks on my website: http://demo.chilipress.com/epic3/
Should my link not work anymore, try the first link above.
See here the CSS and HTML
#sprite1_contact{
background-image: url('sprite_contact.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}
#sprite2_contact {
background-image: url('sprite_contact.png');
width: 27.5%;
height: 0;
padding-bottom: 28%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}
HTML
<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>
your sprites have fixed height: 632px; & width: 1163px; if you want them to resize youshould add at least a min-width and a min-heigth properties
example, if you want your sprites resize to a minimum of 10 px lets say you would add those properties to your code
#sprite-main-v2 {
height: 632px;
width: 1163px;
min-height:10px; /*added this line*/
min-width:10px; /*and this line*/
background-image: url(../images/landing-page/landing-sprite-5.png);
background-repeat: no-repeat;
background-position: 0px -700px;
cursor: pointer;
}
you can also use media queries to change the image acording to screen width or height: example:
#media screen and (max-width: 980px) {
#sprite-main-v2 {
height: 100 px; /*new size*/
width: 100 px; /*new size, value just as example*/
background-image: url(../images/landing-page/landing-sprite-5-small.png);/*smaller image*/
}
}
Shrink your sprite to a smaller set size by adjusting its background-position and background-size css properties in a media query.
background-position: 0 -135px;
background-size: 170px 190px;
Those number are an example, you have to play with them to get it to line up with your sprite, which can be confusing as the image can disappear. Recommend adjusting them bit by bit in developer tools.
You can also use percentages to allow for a more responsive resizing, although this can get tricky too.
Note, background-size doesn't work on IE8 but neither do media queries....
This question already has answers here:
css scaled background image
(4 answers)
Closed 2 years ago.
The website I'm working on, Tamsnails.com, is just about done, but it has one issue that I've been bothered with for a while now. The background image of the store will simply not stretch to the full screen of my high resolution work laptop. I've tried a lot of things over the last couple of months, a lot of which I forget, but
I remember at first, I had it as an actual css background-img
then, I had
<head>
<body id="theBody">
<div id="backgroundImageWrapper" style="height: 100%; width: 100%; z-index: 0; position: absolute;">
<img id="mainBackgrond" src="background_image.JPG">
</div>
with mainbackground style
#mainBackgrond {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
Now, I have
<body id="theBody">
<img id="mainBackgrond" src="background_image.JPG">
<div id="wrapper">
with style
#mainBackgrond {
height: 50em;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
because this at least looks good on my home laptop.
Yes, I know I spelled 'mainBackgrond' wrong.. bear with me here!
If the issue is that the image doesn't stretch to the bottom of the window (which is what I'm seeing in Chrome) then change the height: 50em on your #mainBackgrond style to:
height: 100%;
You might want to take a look at this ( or other similar jquery plugins )
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo - Quite simple to use and it stretches the background image fully without risking the aspect ratio.
Try to remove the height property, this way it will maintain the aspect ratio and stretch all the way across the screen, if this is the intent.
#mainBackgrond {
position: fixed;
z-index: -1;
width: 100%;
left: 0px;
top: 0px;
background: url(/background_image.JPG) no-repeat center center fixed;
}
The background image itself is huge, and makes initial load time very slow, you should consider compressing it more or resizing.
also have a look at css media query a nice way to show different size background images for visitors with smaller screens that might not even have the resolution to see the background.
#media screen and (max-device-width: 480px) {
.column {
float: none;
}
}