Am trying to position my svg image to the corner of the screen. I have tried to add the background-position: top left; property but it didn't work. I have included my code and a picture of how it looks in my browser. I am still trying to figure out what is the problem.
https://imgur.com/a/nnO7WRY
.div1{
background-image: url(../images/back.svg);
background-repeat: no-repeat;
background-size: 100%;
background-position: top left;
height: 100vh;
}
<div class='container'>
<div class='div1'>
p
</div>
<div class='div2'>
p
</div>
</div>
Thanks!
probably, this the image itself, it (svg) itself has the margins, try this, in .div1 with preferable values:
.div1 {
background-image: url(../images/back.svg);
background-repeat: no-repeat;
background-size: 100%;
background-position: top left;
height: 100vh;
transform: translate(-10px,-10px);
}
i dont know exact values of pixels, you need to change them..
i hope it helped :)
NOTE: this answer can only help if the svg has margins, otherwise refer to other answers
Enter CSS property for "background-origin" with value of border-box which places the image relative to border box and not default padding box.
Related
I'm building a website from CSS and HTML. I'm up to the point of adding a background image to my website. The trouble is, the image isn't showing up as the website's background.
My CSS code:
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg"></div>
Just ask me if you need any more code from my website.
Edit: This is not a clone, I've tried every other solution that I've come across on here, and nothing works.
This works fine if you use fixed height:
In the below case I have used 100px;
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
But if you want it to be 100% of the screen you can always go with 100vh
.bg {
background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
<div class="bg">
</div>
If you want to know more about vh visit this link
Hope this was helpful for you.
The background image for a page can be set like this:
body {
background-image: url("paper.gif");
}
so maybe you can change your code become :
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
height: 100px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat-x;
background-size: cover;
}
If you want to add background image to whole HTML Page then use body tag.
body {
background-image: url("https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg");
}
and if you want to add background to specific class then use this
.bg {
background-image: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg');
}
in that adjust your height accordingly. if you want to add to full class then use
height:100% else adjust it with your own condition.
The image that the OP refers to is a resized version of the original. This solution uses the original image along with CSS that uses a height of 100vh (as recommended by #weBBer) and auto for the width. The background position remains with a center value. It seems needless to repeat the image so the CSS uses no-repeat. This works with Google Chrome (version 49).
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
width:auto;
height:100vh;
background-position: center;
background-repeat: no-repeat;
background-size:cover;
}
<div class="bg"></div>
The result is a centered image that fills the page due to background-size property being set to cover as well as the height property set to 100vh, i.e. 100% of the view port height; see more about this and other measurements here.
If you only wanted to fill the portion within the dimensions of the DIV then you could alter the CSS and replace background-size property with object-fit, as follows:
.bg {
background-image: url(https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg);
height:480px;
margin-left:auto;width:100%;margin-right:auto;
background-position: center;
background-repeat: no-repeat;
object-fit:cover;
}
<div class="bg"></div>
I am having trouble with my background covering the whole page vertically, as it is only halfway now. This is what I am currently doing, and I am not sure why it is not working.
<div class="bg">
<div class="container">
some more code here
</div>
</div>
And in my CSS I have:
body, html {
height: 100%;
}
.bg {
background-image:url(myimage.png);
background-height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I have also tried a few solutions from previous posts on here to no avail.
Thank you for your time.
Your bg class will need a height value, otherwise it will only be as tall as the content that fills it.
Also, background-height is not a valid property.
body, html {
height: 100%;
}
.bg {
height: 100%;
background-image:url(http://www.fillmurray.com/800/400);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Change the image to your image and you should be good. See the attached fiddle.
https://fiddle.jshell.net/krqvhymn/
Your can also give your container class a height value. Depends on what you are looking to do
Unfortunately I can't comment, so I'm offering this answer as further help (although it doesn't answer your question):
You can take those background properties and use shorthand to place them all into one line, instead of separates. That would look like:
.bg {
height: 100%;
background: url(myimage.png) no repeat cover center;
}
I am trying to position my logo onto the background image on my website but w/o success. The original size of my logo is 712x200 px. But I wanted it a bit smaller so I added height:140px and width:500px to my css (this is proportional to the original size of my logo).
However, the logo image is not resized (it doesn't become smaller as I defined in my css). Insted, it is cropped!? How come?
And how do I center the logo onto my background image, so that my loggo always appears in the very center of the screen (vertical and horizontal).
Here is my css code:
.logoimage{
background: url("images/Logo.png") no-repeat scroll center;
width: 500px;
height: 140px;
}
Here is HTML:
<section id="home" class="photobg">
<div class="inner">
<div class="copy">
<h1 class="logoimage"></h1>
</div>
</div>
</section>
Btw, I found some similar example of what I am trying to do here: http://milkandpixels.com/
So, basically I have a background image and I want to add the logo on top of it which should be centered all the time. Thanks all!
Hmmm, does adding this style fix the issue?
.logoimage{
background-size: contain;
}
Otherwise, let me know and I'll be happy to help further!
You should use background-size:
.logoimage{
background: url("images/Logo.png") no-repeat scroll center;
background-size: 500px 140px;
}
http://www.w3schools.com/cssref/css3_pr_background-size.asp
put the image in the image tag, add a class to the image tag. In the class put:
.logoimage{
width: 500px;
height: auto;
}
If none of the other answers work, you could always try and scale with
height: 50%
width: 50%
This style might be useful:
.logoimage
{
background:url("flwr.gif");
background-size:140px 500px;
background-repeat:no-repeat;
padding-top:40px;
}
I am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
And the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.
This is because height:100% is functionally useless, and your div resultingly has no height.
If you give the div a fixed height, the image should appear as expected.
Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.
html {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
http://jsfiddle.net/dolours/JcxLm/2/ Give a specific height, Height 100% is meaningless
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 50px;
}
try this <div class="wrapper"></div>
It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:
<div class="wrapper"> </div>
you can use css for body tag, the css of body will be like this:
body{
background: url(../assets/bridge.jpg) center top no-repeat;
}
i think it will work for you, if you want just background image.
The following is the structure of the code of my website.
<body class="xxx">
<div id="top-header">... code ...</div>
<div id="wrapper">... code ...</div>
</body>
And this is the CSS code I use for a background image.
body {
background-image: url('http://example.com/background-image.jpg');
background-position: top right;
background-repeat: repeat;
}
The problem I have with this is, about 50px of the background image is hidden under the "top-header" div, which is 50px in height (It's the menu). How do I adjust the code so that the background image shows properly, fully below the menu (top-header)?
Just so, you know, I tried this css code as well:
#wrapper {
background-image: url('http://example.com/background-image.jpg');
background-position: top right;
background-repeat: repeat;
}
And this changed the white background of my content to the image. Which is not what I want.
The only way is to move the starting point of background-image 50px down. How do I define that? Please try help. Thanks.
Sorry guys, this was easy. I actually followed the CSS Twitter uses for background, and I got it. I just had to replace "top right" with "right 50px" where 50px is equal to the margin you'd like to leave at the top of the background image.
body {
background-image: url('http://example.com/background-image.jpg');
background-position: right 50px;
background-repeat: repeat;
}
cheers!
use this in style:
background-position: calc(100% - 30px) center;
example:
body {
background-image: url('http://example.com/background-image.jpg');
background-position: calc(100% - 30px) center;
background-repeat: repeat;
}
instead of 30px you can change the pixel value for positioning the background image.