I am having trouble getting my image to display when there are no fixed height and width assigned. I want my image to be flexy and responsive with my grid, so what I thought would work is to set height and width to 100% but no avail.
How can I get the image to show and be able to change size accordingly?
HTML
<div class="row">
<div class="large-12 columns">
<div class="hero">
<img id="image" src="steve1.png" alt=""/>
</div>
</div>
</div>
CSS
.hero {
max-width: 100%;
height: auto;
background-repeat: no-repeat;
margin: 0;
}
Give this a shot:
html {
min-height: 100%;
background-size: cover;
background-image: url(steve1.png);
background-repeat: no-repeat;
background-position: right bottom;
}
body{
min-height:100%;
}
Try adding to the css:
.hero img {width:100%;}
You have to add the style to the img it self, not the container div.
Related
I want to include background image which is oversized (4000px x 3000px) in the div,
in such a way that width will take max width of the screen and height will adjust to it.
I don't know why but it doesn't work if the height is not specified (like 1000px).
The image doesn't appear at all.
I wanted to make jsfiddle but there it works (probably because height is somehow specified automatically)
The part of code (HTML):
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
The part of code (CSS):
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("path/to/my/image");
max-width: 100%;
width: 100%;
height: auto;
}
And with this code nothing appears (as it looks the height is 0px), how can i do the thing that height will adjust to size of width i.e. scales itself.
In your example, the div is inheriting the width of the parent section tag, taking into account any margin or padding on the body element. It has display: block so width is 100% , height is auto so it's the size of whatever inside. So in your case there's nothing inside the div tag, which means it's height: auto; value is 0.
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg");
max-width: 100%;
width: 100%;
height: 100px; // auto means 0 if there's nothing in your div element
display: block; // this is a default for every div tag
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Just try this replace the auto with 100% in height and check.
.section-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg);
max-width: 100%;
width: 100%;
height: 100%;
display: block;
position:absolute;
top:20%;
bottom:0;
right:0;
left:0;
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Are you like this .
So, I want an image to cover the width of the screen but my CSS code isn't working in order to do that nor can I link the image through CSS so it displays on the page, it only shows when in HTML. I have other images showing fine via CSS so not sure why this won't if you can help. And please help to why it won't be the width of screen. Please note I'm a beginner.
#aboutuspic {
max-width: 100%;
height: auto;
background-position: center;
background-repeat: no-repeat;
}
<section id="aboutuspic">
<div class="container">
<img src="inside.jpg" />
</div>
</section>
The answer is simple - just do this:
#aboutuspic{
max-width: 100%;
height: auto;
background-position: center;
background-repeat: no-repeat;
}
img {
width: 100%;
height: auto;
}
<section id="aboutuspic">
<div class="container">
<img src="https://cdn.mos.cms.futurecdn.net/42E9as7NaTaAi4A6JcuFwG-320-80.jpg"/>
</div>
</section>
I think this is what you mean. The issue was that you needed to specify that it has to take up the whole width of the viewport.
I hope this helps you,
Tilier
I am currently positioning a background image that is small in height but large in width to stretch all the way across the browser. I am only able to achieve this when I do background size cover, but not when I set a certain size to the image other than cover. I tried background repeat-x but that does not seem to work either.
<html>
<body>
<div class="background">
<div class=“header”></div>
//some content
</div>
<footer><footer/>
</body>
</html>
CSS
.background {
background-image: url(some image);
background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
Just add background-size: cover code in css will resolve the issue.
.background {
background-image: url(some image);
background-size: cover;
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
It is working with background-size:100%;
.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
}
html, body{
height: 100%;
}
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div, body{
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="message"></div>
</div>
Not very related to this question but I hope this answer will save someone's time
For the people who are using bootstrap. Keep the image inside a container, check again if it is inside class="container", I had a typo, I wrote classs instead of class and the background image wouldn't fit.
Second, close previous divs.
Third, if you don't use container and start with just <div class='row'></div>, background image won't fit.
Working Example:
<div class="container" style="background-image: url('img'); background-size: cover;">
<div class="row">
</div>
</div>
I'm curious if the CSS unit vw (view width) will accomplish what you are trying to do with width: 100%
Instead of width: 100%, try width: 100vw
https://www.w3schools.com/cssref/css_units.asp
I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>
I have made the following layout:
html,
body {
height: 100%;
}
.header {
height: 120px;
width: 100%;
background-image: url(http://lorempixel.com/500/120/);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<div class="row">
<div class="columns small-12 header"></div>
</div>
It works because I have used a height-property with a fixed pixel-value.
If one removes that the image disappears:
html,
body {
height: 100%;
}
.header {
width: 100%;
background-image: url(http://lorempixel.com/500/120/);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<div class="row">
<div class="columns small-12 header"></div>
</div>
One of the problems with using that fixed height is that responsiveness can't be accomplished.
How can I make the background appear without having to use a fixed height?
Or should I fall back to using img-tag instead?
There the height is determined by the image-sizes itself.
Currently, your .header doesn't have any content, and thus its height is actually 0px....
To change that, you can either put content into your .header like: text, images... OR give it height via css, either static (in px), or dynamic (via '%', or 'vh'...)
You can use viewport height to make div responsive, in below example 40vh is 40% of viewport height.
html,
body {
height: 100%;
}
.header {
height: 40vh;
width: 100%;
background-image: url(http://lorempixel.com/500/120/);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<div class="row">
<div class="columns small-12 header"></div>
</div>
You can use one transparent image like below:
html,
body {
height: 100%;
}
.header {
width: 100%;
background-image: url(http://lorempixel.com/500/120/);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.header img {
width: 100%;
}
<div class="row">
<div class="columns small-12 header">
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAGQBAMAAACkCxkHAAAAGFBMVEUAAAD///+TlJWcnp+Ji4yIiouVlZaSk5OelJf9AAAAAXRSTlMAQObYZgAAANVJREFUeF7tzTEVgEAMBbB/HZivDhCBBAQgBf8TLngdEgNJZw6qszMGV1YG4X6OHxYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIA3g1DZGYSVPjMG1R9lOgHLp7M9BAAAAABJRU5ErkJggg=="
/>
</div>
</div>
You can change window size here:
https://jsfiddle.net/gcejf26t/
If you noticed images are showed weird, because they are just like that! nothing to do with CSS (of course transparent image ratio can be equal to your image's ratio).
You can find smaller base64 coded image in comparison with that I've used and also better ratio as you desire.
But why you should do this? I don't know! Use <img> for simplicity.