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;
}
Related
i'm pretty new to CSS but I made something in illustrator (web)and wanted to put this as background-image in css. I've put the image in a <div> and CSS in I just put background-image: url(berg.jpg), i'm sure the url is correct, but it doesn't display anything. I've put height: 100% in css after that and it showed up but it was all zoomed in and only displays a small corner of the picture because of the zoom. How can I display this correctly? The image size is width: 1366px; height:768px.
Sorry if this is already asked but I couldn't seem to find it. Thx on advance.
Your image is displaying as full size. If you add the background-size attribute to your css, you can define the size.
See this link for all background-size options:
https://www.w3schools.com/cssref/css3_pr_background-size.asp
You can also define the background-position to have image centered, etc.
https://www.w3schools.com/cssref/pr_background-position.asp
CSS example
#problem-image {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
}
#correct-image {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
background-size: cover;
background-position: center center;
}
See jsfiddle for full working example:
https://jsfiddle.net/3o8b2e4s/
You can try to put bakcground-size: cover; in your CSS code and this will ocupe all background of your div independent of width or height.
I have image of size 1400x560 and I want the my jumbotron div to scale to fit the size of the image. It works fine when i set the width of the jumbotron to that of the image but when I shrink the website to mobile view, I have issues. So how can I fix this?
I forgot to mention i have issue with the height and not the width, The jumbotron scales div to the width of 1400 but not to the height 560px
Here is a preview of the html page http://threeguys.us/rts/testing.html.
When i shrink the page , i want the image to resize according to the width of the browser
index.html
<div class="jumbotron">
</div>
css
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
height:560px;
}
What you're looking for is background: contain;. Simply add this to your class as follows:
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
background: contain;
width: 100%; /* make sure to define width to fill container */
height: 100px; /* define the height in pixels or make sure */
/* you have something in your div with height */
/* so you can see your image */
max-width:1400px; /* define the max width */
}
The background image will now scale with the size of the div (assuming the div is scalable). If you want to constrain your div so it does not get bigger than a certain size (in your case, the size of the background image), use max-width: 1400px;
See my JSFiddle example.
There isn't a way to get the div to fit the size of its background image, so I suggest you use an img tag instead.
To get your div to fit the size of the image, use display: inline-block on the div:
.jumbotron
{
display: inline-block;
border: solid red 1px;
}
<div class="jumbotron">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
Try:
background-size: 100%;
width:100%
position:relative;
Hope it helps you
Wrap your jumbotron with:
<div class="container"></div>
It should make it fit width-wise to the rest of your page.
Make it simple. Thanks
.jumbotron {
background-image: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-8362242.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="jumbotron"></div>
I need your help with a site i'm putting together. I'm a noob and have been given a design that has the body with designed to 900px wide but they have given me an image that is 1200px wide. They want the image to span the full 1200px wide, so essentially there will be 300px overlap on either side of the page. I can't quite figure out how to do this, any help would be appreciated!
Thanks,
Dave
Your best bet to accomplish what they want is to make the image a background-image in CSS.
Set up a div that will contain the image (as a background), and position it on the page relative to where you want it to be.
<div class="background"></div>`
Either fill the div with content to give it a height or define a fixed height, say 400px.
<style>
.background {
height: 400px;
width: 100%;
}
</style>
Now, set the background properties to achieve what you want.
<style>
.background {
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-image: url(URL_TO_IMG);
background-position: center center;
background-size: cover;
}
</style>
JSFiddle example here:
jsfiddle
You can use this code:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
to cover the exact space you have.
body{
background: #ccc url(image_folder/image_name.extension) np-repeat 0 0 center;
}
#otherelement{
/*Style Your Page Whatever you want...*/
}
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.
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