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/
Related
I think I have an impossible task but before giving up on this I want to be sure that it's really not possible. Maybe it's possible with millions of media queries, but that isn't worth the struggle.
However, I have a backgroundimage with a height of 100vh, meaning it's always 100% height of the users window, and a width of 100%. These two things might make my task impossible.
Within the background image I have another image which should always be on that position, no matter what.
I came up with an example. I want the rocket always stay on that rectangle on the planet. I made this possible on my screen, but it could slip on your screen due different screen sizes.
(stackoverflow doesn't allow images with http, so please change the image src to http or take a look at my codepen: https://codepen.io/anon/pen/yjXbPL)
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
img {
width: 150px;
position: fixed;
top: 240px;
right: 780px;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>
Is this possible?
Use Position fixed as u do.
Use Left and top, not right.
Put the image beside the background div not in it.
Attached codesnippet shows you a solution. It is based on that you put your rocket and background in 2 different divs and stack them by using CSS-index.
Further on, the rocket is positioned fixed and I added a height of the background that makes it a bit scrollable.
Now, to solve the graphical split of the rocket and the background image you would have to create them as 2 different images and place them into each respective div in the HTML (see codesnippet).
In terms of using different devices you would have to test how the rocket might change position and solve that through a combination of media queries, and potentially use % position instead of px (to position the rocket correct):
.background-pic {
position: absolute;
z-index: 1;
width: 200px;
height: 1000px;
background-color: darkblue;
}
.rocket {
position: fixed;
z-index: 2;
width: 50px;
height: 50px;
background-color: orange;
margin: 100px 0px 0px 100px;
}
<div class="background-pic"></div>
<div class="rocket"></div>
The reason why this can be really hard to achieve is because you're using background-size: cover; which means stretch the image while keeping its aspect ratio and crop the image in order to fit its container's height and width. When you combine this with background-position: center center; it will crop on the edges equally. Then finally you're using two different kinds of measurement units: height: 100vh; width: 100%;
The question then becomes, before the image is cropped, what's the new width and height for the image that "cover" is applying?
This is something very difficult for CSS to determine because it requires things like knowing the ratio of your image (2560x1600 has a ratio of 1.6:1), then trying to fit it inside a container of variable width and height such that it is just small enough to fill it, while cropping out anything left out, before it is cropped, what is the actual size of the image?
Both height: 100vh; and width: 100%; will affect its size, in the manner explained above. As this requires comparing the image's original height and width, with the container's width and height to determine how to stretch the image, trying to figure this sort of math out with pure CSS isn't an easy feat for CSS to achieve without some assistance from JavaScript.
A decent solution is to add a bunch of transparency to the rocket image so it has the same size as the background so it can also go through the same "cover" stretching and cropping logic.
Give this a shot:
https://codepen.io/anon/pen/xjrPvM
HTML:
<div class="background" data-comment="2560x1600 has an aspect ratio of 1.6:1">
<div class="rocket">
</div>
</div>
CSS:
.background {
background-repeat: no-repeat;
background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}
.rocket {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
background-image:
url('your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png');
}
Within the codepen I used a base64 encoded version of "your-rocket-on-a-2560x1600-canvas-with-lots-of-transparency.png"
which is just the rocket placed on a 2560x1600 canvas I did in GIMP, transformed it -20.0 degrees moved it around so it's placed where you want it then exported it as a PNG.
Instead of using the image as background, I've used an inline image with the rocket placed on top. Then the rocket and background are made responsive relative to each other.
.background {
position: relative;
}
.background img {
max-width: 100%;
display: block;
}
#rocket {
top: 49%;
left: 47%;
width: 15%;
height: 15%;
background-image: url(http://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
transform: rotate(-20deg)
}
<div class="background">
<img src="https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg">
<div id="rocket"></div>
</div>
Up to some point, it's possible. Here is my solution for that, I have tried and tested your code. These are the changes to fix your code:
Set the position of the image to fixed:
img
{
width: 150px;
position: fixed;
top: 50%;
margin-top: 20px; (adjust some pixels as per your need)
right: 50%;
margin-right: -90px;(adjust some pixel as per your need)
transform: rotate(-20deg)
}
Here is the complete working example:
https://codepen.io/atulraj89/pen/MGooLr
I want a fullwidth background (with horizontal scroll) for a project that I'm working on at the moment.
I've added the following code to set the background:
.street {
position: absolute;
top: 0;
left: 50%;
background: url('../img/street.svg') no-repeat left;
background-size: cover;
width: 100%;
height: 100%;
z-index: -2;
}
That works, but then I've had a new problem, because of the background-size: cover the image only shows a part of it.
The user has to scroll horizontally, so that he or she can see the whole street image. My question is: How van I fix that? (I've already searched on the internet and maybe it is a really simple solution, so sorry for asking :))
What I have so far
Thanks!
use, background-size: 100% 100%; this will fill your entire DIV with complete image.
.street {
position: absolute;
top: 0;
left: 50%;
background: url('../img/street.svg') no-repeat left;
background-size: 100% 100%;
width: 100%;
height: 100%;
z-index: -2;
}
Here is the difference:
Percentage: Sets the width and height of the background image in percent of the parent element. The first value sets the width, the
second value sets the height. If only one value is given, the second
is set to "auto".
Cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit
off one of the edges.
Contain: Resize the background image to make sure the image is fully visible
Here is a good explanation for the same
I seem to be having some issues with an image. It's not sticking to the same width when I modify the max height, like below.
.lead-pic img {
background-size: cover;
margin-left: -150px;
max-height: 1000px;
What I'm trying to achieve is an image that covers both sides of the page and also reduce the height of the image at the same time. I'm not sure if there is some code that locks the width in place when you change the height pixels.
Here is a screenshot of what I mean when I change the height:
This is on wordpress within a staging environment so I can't provide a URL to the website. Any ideas?
you can set only one property to image either height or width. If you set both the image will blur, aspect ratio is not same as original image. Try to wrap image in one element set property to that wraping element and assign max-width: 100%; to image tag.
If I am not wrong on this one, if you use the background-size property it will not be aplied to your image which is coded in your HTML file. For this you need to ad a background: url(link/to/image.png)
.lead-pic {
background: url(link/to/image.png);
background-position: top;
background-size: cover;
margin-left: -150px;
max-height: 1000px;
Example:
.lead-pic {
background: url(http://lorempixel.com/400/200);
background-position: top;
background-size: cover;
height: 300px;
width: 450px;
}
<div class=lead-pic></div>
Hope this helps. And, correct me if I'm wrong :).
If you want it as a background and to automatically adjust size, try making the image position fixed and putting your content in div with position:absolute. Use vh and vw to set the size. vh and vw are percentages of the current viewport height (vh) or width (vw).
i.e.: height:100vh = 100% of the current viewport height.
.lead-pic {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.content-example {
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 100vh;
}
<img class="lead-pic" src="https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg" />
<div class="content-example">
All of your content can go here.
</div>
Keep in mind that this will stretch the image disregarding the aspect ratio and will degrade the quality. If you want to keep the quality of the image, set it to 100vh/vw in the direction of the shortest dimension (in this case, width:100vw). The following snippet expands the image width, only:
ADDED AFTER CORRESPONDENCE, BELOW
This will get you the div like I understand you want it. If you want to add parallax functionality, I'd suggest searching for "Pure CSS parallax"
.lead-pic-container
{
max-height:200px;
height:200px;
width:100vw;
overflow:none;
background-size:cover;
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg');
background-position: 50% -325.828px;
}
<br><br><br>
<div class="lead-pic-container"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Solved.
With combined information from stack overflow users, here is the answer:
.lead-pic {
background-image: url(http://www.cutepinkboutique.com/staging/wp-content/uploads/2017/06/pexels-photo-220436-1.jpeg);
background-size: cover;
height: 900px;
width: 2000px;
margin-left: -220px;
background-position: 50% center;
}
.move-pic {
padding: 120px;
height: 1000px;
width: 100%;
}
I have an background image that I can set with an img tag or through background-image. I'd like the image to always stay centered in the browser. Then when resizing the browser I want the image to stay full size and start hiding the overflow on both the left and the right. The overflow should get clipped on both sides of the image so the center of the image is always in the center.
Try something like this, may need to change slightly depending on your page layout.
.parentElement {
position: relative;
float: left;
width: 500px;
height: 200px;
overflow: hidden;
}
.parentElement img {
position: absolute;
min-width: 100%;
min-height: 100%;
max-width: 200%;
max-height: 200%;
top: -999px;
right: -999px;
bottom: -999px;
left: -999px;
margin: auto !important;
width: initial;
}
https://jsfiddle.net/409u4zop/4/
If you want to use background image you back just do
background-position: center;
Add background size and position
background-size: cover;
background-position: center;
background-size: cover
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I have a header image on a wordpress site I'm creating that needs to be the full width of any browser.
The code already existing on the parent theme is:
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0 7px 10px -10px #000;
width: 100%;
z-index: 0;
height: 300px;
margin-bottom: 80px;
There is also a second style sheet on the theme thats used and inherits most of the styles from the parent stylesheet, where the image CSS on that stylesheet is:
background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
width: 100%;
height: 300px;
I'm not sure why the heading image has two css codes in two stylesheets, but thats the way the theme came, and I'm not a expert in this so that may be normal.
The image is sticking to the original size (1369x325px) even when the width is changed to 100% and therefore cutting some of it out on a smaller browser.
Any help where I'm going wrong would be great, site address: http://biobreak.co.uk/test/services/
Thanks.
The rule in the first stylesheet actually sets the size of the background image with the word cover.
The second rule's width: 100%; setting only sets the width of the surrounding element, not the background image itself (which remains unchanged cover).
So you have to add
background-size: 100%;
to that second rule.
Two way, the first one is to put the image in a relative div and then give the image the following
img {
position: absolute;
width: 100%;
}
or just use the vw unit
img {
width: 100vh;
}
if you're a background image just use background-size: 100%;