Hey,
I would like to get a whole image, in the width of the browser, as my header.
But the thing is, i get a horizontal scroll bar, and I don't want that.
What I want is that the image adjust if the browser also adjust.
Is this possible with css?
Sorry for my bad english.
This is my code
#header {
Margin-left:auto;
Margin-right:auto;
heigth:400px;
position: center center;
min-width: 100%;
max-width: 1024;
}
<body>
<div id="header">
<img src="header.png" />
</div>
You could chose to set your image as background image and use background-size: cover; like this:
#header {
width: 100%; height 400px;
margin: 0 auto;
background: url("../header.png");
background-size: cover;
}
<div id="header"></div>
You can find more explanation about background-size here:
http://www.css3.info/preview/background-size/
Try.
#header {
max-width: 100%;
background:#ffffff url("header.png") repeat-x;
}
You may be looking for a background cover:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Using the cover method will scale the images to fill the container.
You can set #header img { max-width: 100%; }
Hmm, if i do a background-image, the image itself does not show up. Maybe beacause its 1400px in width, can css crop this for each diffrent width of the browser witout any horizontal scrolling bar.
Related
I am currently trying to use a subreddit theme and resize an image to be bigger/actual size of uploaded image.
Current code for the Logo is:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 100px;
background: url(%%subredditlogo%%) left center/auto 50px
}
I am trying to scale image to be bigger with keeping aspect ratio.
Like I said this is on Reddit, so I can only interact with the subreddit stylesheet.
I have edited it some and played with it, I have gotten improvements, but not the full image to show.
Here is my current code:
/* SUBEDDIT LOGO ADDON
----------------------*/
#header .pagename a {
width: 300px;
background: url(%%subredditlogo%%) left center/auto 300px;
background-size:100% 200%;
background-repeat:no-repeat;
}
It has resized the width but I cant get the height to change. I have tired the:
left center/auto 300px;
but nothing, and also the
height: 100%;
height: auto;
Just looking to get it fixed now.
Try this:
background-image: url(%%subredditlogo%%);
background-position: left center;
background-size:cover;
background-repeat:no-repeat;
I believe you need to break out your "background" css into individual attributes in order for each attribute to work properly.
You could try this:
background: url(logopath) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
#header .pagename a img{
width:100%;
height:auto;
}
Try this for auto resize img.
I have been researching for a while to how to get my background image to work on different screen resolutions. After many failed attempts I noticed I can't even get a normal css background in. It's not the file, I have tried different formats.
Code for the different screen resolutions:
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
The code the normal background:
body {
background-image: url('Background.jpg');
}
That is strange. Did you check that the path to your image is correct? For example if the image is inside an "example" folder, the path should be "example/myImage.png".
As for a responsive background, I believe you are on the right track, although a simple background-size: 100%; would have been enough. Check this Jsfiddle https://jsfiddle.net/a0mvnj63/
Also try using an external image, like in my example, just in case.
Try to use your code like this background-image:url('../background.jpg'); with height: 100vh;
body {
padding: 0;
margin: 0;
height: 100vh;
background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg);
background-size: 100% 100%;
background-position: center;
}
h1 {
text-align: center;
color: #fff;
}
<body>
<h1>Hello Universe</h1>
</body>
only background elements does not give height and width to any div or html.
try giving some height and width to your code. just like
html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }
or just put some data on body so you get auto height width according to contain and get image in background.
I have a background image which I would like to cover the element, using background-size: cover; However, I'd also like to scale it up 110% in both directions, beyond what cover does, so that I can subsequently move it around with background-position.
Put another way, I'd like background-size: cover to treat the surrounding div as if it were 110% larger in both directions.
Is there a way to do this purely in CSS?
If I understand correctly, this would be a way to do it, but max() is not standard CSS3:
background-size: max(auto 110%) max(auto 110%);
I have created a Fiddle for you to check out. I believe I understood the question correctly but please let me know if I am off base.
I wrapped the div that has the background-image in another div like so:
<div class="hero-container">
<div class="row" id="hero"></div>
</div>
and applied the styles like so:
.hero-container {
overflow: hidden;
width: 100%;
height: 100vh;
}
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 110vh;
margin-bottom: 0px;
right: 0;
}
Play around with the fiddle by changing the height: 110vh and let me know if this is what you were looking for, or if I am at least on the right track.
Hope this helps!
EDIT*: I removed the transition and the padding as these are not necessary.
If you would like to do this with a container that has a fixed height you can change the .hero-container height to 500px or something and then just use 110% instead of 110vh in the height for the #hero div.
If I do understood your question correctly, I guess you can try this below:
.box {
width: 40vw;
height: 40vh;
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center;
background-size: cover;
}
.box:hover {
background-size: 140%;
}
<div class="box"></div>
I'm trying to learn html and css. Right now I'm trying to make a background image fill the browser window no matter the size.
I've googled it 100 times and every page pretty much says the same thing. So I copied the code and it isn't working for me. When I set my browser to a smaller size, the background image repeats itself. Which I don't want I just want it to fill the window.
Here's my css.
html {
background-image:url(background.jpg);
background-size: 100%;
background-image: no-repeat-y; }
Before I did 100%, I tried using cover instead and that didn't work either. The image is fullscreen when the window is maximized but when I resize it the image will repeat.
Using background-size cover will do the job:
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
To scale, the CSS you want to scale needs to be inside a container itself, namely BODY inside the HTML container; try this:
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image:url(background.jpg);
background-size: 100% 100%;
background-repeat: no-repeat-y;
}
You need to specify a height of 100% to the parent div <body> so that any child div with a height: 100%; will take the height of it's parent div. Here's an example:
Wrap your content in a parent div like this:
<html>
<body>
<div class="wrapMeTight">
....Your page content....
</div>
</body>
</html>
And add this to your css:
html, body {
height: 100%;
}
.wrapMeTight {
min-height: 100%;
height: 100%;
background-image: url (/img.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
Use this:
<html>
<head>
<style type="text/css">
body { background-image: url("background.jpg"); background-size: 100% 100%; background-repeat: no-repeat; height: 100vh; width: 100vh; }
</style>
</head>
<body>
</body>
</html>
I have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}