I have images stored in images folder inside assets folder
app
-app.component.css
assets
-images
-some-image.png
I'm trying to get the image in css inside background-image, but I think I have path related issues, since I can't seem to bring the image.
background-image: url(../../../assets/images/some-image.png) no-repeat center top;
Help would be appreciated.
Try adding the style as following with a width and height. Also, isolate the background-repeat and background-position. It'd work.
background-image: url(../assets/images/some-image.png);
background-repeat: no-repeat;
background-position: center-top;
width: 100%; // any width
height: 230px; // any height
To make it look better you can add,
background-size: contain;
UPDATE:
The reason that the image doesn't show up without width and height,
As default div is given a height of 0 since there are no inner elements.
But, it has a default width of 100% already.
Therefore, when we add an image using CSS background image property, we've to add the height attribute.
It should be just,
background-image: url(../assets/images/some-image.png) no-repeat center top;
I just this should work just fine
background-image: url("../src/assets/images/some-image.png");
Relative paths (in general) in CSS and HTML
CSS
background-image: url(/assets/images/some-image.png) no-repeat center top;
HTML:
<img src="assets/images/some-image.png">
you could not set no-repeat to background-image
It should be like code below:
background: url(../assets/images/some-image.png) no-repeat center top;
Related
I have a background image in the following div, but the image gets cut off:
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
Is there a way to show the background image without cutting it off?
You can achieve this with the background-size property, which is now supported by most browsers.
To scale the background image to fit inside the div:
background-size: contain;
To scale the background image to cover the whole div:
background-size: cover;
JSFiddle example or runnable snippet:
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
width: 100px;
height: 200px;
border: 1px solid;
background-size: contain;
}
<div id="imagecontainer"></div>
There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.
If what you need is the image to have the same dimensions of the div, I think this is the most elegant solution:
background-size: 100% 100%;
If not, the answer by #grc is the most appropriated one.
Source:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can use this attributes:
background-size: contain;
background-repeat: no-repeat;
and you code is then like this:
<div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
background-position-x: center;
background-position-y: center;
you also use this:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
I don't know your div-values, but let's assume you've got those.
height: auto;
max-width: 600px;
Again, those are just random numbers.
It could quite hard to make the background-image (if you would want to) with a fixed width for the div, so better use max-width. And actually it isn't complicated to fill a div with an background-image, just make sure you style the parent element the right way, so the image has a place it can go into.
Chris
try any of the following,
background-size: contain;
background-size: cover;
background-size: 100%;
.container{
background-size: 100%;
}
The background-size property specifies the size of the background images.
There are different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height).
percentage - Sets the width and height of the background image in percent of the parent element.
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
For more: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Alternative:
background-size: auto 100%;
you can also try this, set background size as cover and to get it look nicer also set background position center like so :
background-size: cover;
background-position: center ;
So I am creating a website for practice and I want an image to span across the website and be 400px high. But it turns out that the image is replicating it self into the two of the same images in order to expand across the webpage the height is fine.
1) Why is the happening.
2)How do I fix this below you will find my code.
.image {
background-image:url("sauce.png");
height: 400px;
width: 100%;
position: center;}
<div class="image"></div>
The dimension and position properties of the container are not related to background image. Try the following instead:
background-position: center;
background-repeat: no-repeat;
Also, if you want the background-image to fill the entire area, you can use
background-size: cover; which will crop and fill the container maintaining the aspect ratio, or background-size: contain; which will squeeze the entire image in the container, distorting the aspect ratio.
This is because of the CSS background-repeat property which by default is set to repeat.
In your CSS for .image, add the following line: background-repeat: no-repeat;.
background-position: center;
background-repeat: no-repeat;
I have a div, .cover-section, that I want to have a full background image that is the size of the viewport. I want to use the cover css property. I have got this working for the body of the page, but if I add more content and try to scroll, the image stays as the background. I want the image to scroll along with the content. This is what I have so far:
.cover-section {
background-image: url('../images/cover.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
How would I get it to do what I want?
Remove this linebackground-attachment: fixed;
I have a problem with setting a background image over my background color: Here is my example so that you can see what I mean: JSFiddle
Now here is the functional CSS part:
#tancan{
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
}
As you can see in the JSFiddle, the background image repeats. If I use no-repeat as a property, the image disappears.
Also, I want the background image to float to the right, and should the image be bigger than the containing div, how to I make it fit proportionally? - Like you would make an image tag <img/> fit by using width: 100% and height: 100%?
I don't want to use an HTML image tag, it would be much easier but there are several reasons I do not want to use it.
Try this - http://jsfiddle.net/vmvXA/17/
#tancan {
background: #ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat top right;
}
and to make the background image not exceed its parent container you can use background-size: contain - http://jsfiddle.net/vmvXA/22/
Here's the fiddle.
background:#ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat right top;
To make the code shorter, it is possible to specify all the settings in one single property. This is called a 'shorthand property'.
To make all pictures fit inside it's parent add the style property background-size:contain;.
Updated the fiddle.
You can't just add no-repeat to background-image, because background-image is a specific property that only refers to the image itself. If you want to add it all in one declaration, then set background:
background: url('http://lamininbeauty.co.za/images/products/tancan2.jpg') #ebebeb no-repeat top right;
or keep it all separate, up to you:
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
background-repeat: no-repeat;
background-position:top right;
background-size: contain;
OK, this one works, the ocean picture shows up in the background but repeated 4 times to fill entire screen.
<style type="text/css">
body {background-image:url('ocean.png');}
</style>
<body>
</body>
Then change to
body {background-image:url('ocean.png') no-repeat center center;}
Now nothing shows up background picturewise.
Here's how you can do this and stretch it to the full height/width of the screen (note: if it is not the right proportion, some distortion will occur):
body {
background-image: url(ocean.png);
background-repeat: no-repeat;
background-size: 100%;
}
IIRC, background-size and being able to write url(...) without quotes are part of the CSS3 standard.
Because background-image can't take more paramters - change it to background: url..., which is the correct property to set all of those in one line.
body {background: url('ocean.png') no-repeat center center;}
Try it this way:
body {
background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
You can size the background image in the background property as follows:
background: url('ocean.png') no-repeat top center 100% auto;
or
background-size:100% auto;
The first parameter is for the width, the second for the height. The first example will put the image top center and stretch it to fill the browser window in width, and set the height proportionately. You can also use "cover" in place of "100% auto" and the browser will fill the image in whatever way it needs to to fill your background.
Note: this is CSS3, and as such the background-size propery will only work in newer browsers, IE9, Firefox 4, ect.