I'm having a problem centering a SVG image in the background.
Here is the CCS:
.cs-title {
display: block;
background: url("../logo.svg");
background-repeat: no-repeat;
height: 220px;
margin: 0 auto;
text-indent: -9999px;
width: 440px;
background-position:left center;
float: center;
}
Do you guys have any ideas?
Thanks!
For a logo, I would place the svg on the page rather than as a background image. Also, without more information, I would guess that the issue is with the svg itself. Have you got the viewbox propety set to the svg dimensions in the svg code, as well as height and width set to 100%?
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/
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%;
I have one problem that I can't solve, I need my banner to be full width, not boxed. For example: the page is 1024px witdh and my banner is 800px width, now i need my banner to be 100% width. If you understand me, so, my friend and me we was trying a lot of options but we didnt figured it out.
Here is my CSS code with banner:
#banner{
background-image: url(mats/banner.jpg);
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
I have tried everything but nothing successful.
It is background-size.
background-size: 100%;
On applying this property, your background image(800px width) would strech to 1024px, which results in image quality loss.
Better applying this property on images with width > 1200px
If the height: 470px is also intended as background height, dont use it.
Never set height & width on a image, it changes the aspect ratio. If one is set, the other will auto adjust according to, else Images looks shrinked or stretched
I think you might missing background-size
#banner{
background-image: url(mats/banner.jpg);
background-size: 100%;
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
Say, like in this example here: http://www.electrictoolbox.com/examples/wide-background-image.html
When I do it, I end up getting white borders around the image no matter what I do. What am I doing wrong?
If you're hoping to use background-image: url(...);, I don't think you can. However, if you want to play with layering, you can do something like this:
<img class="bg" src="..." />
And then some CSS:
.bg
{
width: 100%;
z-index: 0;
}
You can now layer content above the stretched image by playing with z-indexes and such. One quick note, the image can't be contained in any other elements for the width: 100%; to apply to the whole page.
Here's a quick demo if you can't rely on background-size: http://jsfiddle.net/bB3Uc/
Background images, ideally, are always done with CSS. All other images are done with html. This will span the whole background of your site.
body {
background: url('../images/cat.ong');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You set the CSS to :
#elementID {
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat;
height: 200px;
}
It centers the image, but does not scale it.
FIDDLE
In newer browsers you can use the background-size property and do:
#elementID {
height: 200px;
width: 100%;
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat;
background-size: 100% 100%;
}
FIDDLE
Other than that, a regular image is one way to do it, but then it's not really a background image.
the problem is the margin of body his default value is margin: 8px
and i make it margin : 0 so the image stretching and there is no white places