Nothing seems to be working for me. But what I would like to do is make the header image fit to the size I'd like, which is the container. Heres the actual page link: this.
And heres the jsFiddle here: http://jsfiddle.net/Zorabelle/f7DRh/.
I think this is what I have to fix but I just don't know.
/*HEADER IMAGE DETAILS - HEADER MUST BE 921PX WIDE*/
.header {
background-image: url(http://media.tumblr.com/aceb30d864925524ee215c0d6f88e1bc/tumblr_inline_mu0br62w4R1s7znag.gif);
background-repeat:no-repeat;
height:200px; /*CHANGE TO THE HEIGHT OF YOUR BANNER*/
}
I want the 'Define the Term' header to fill up that whole space. Help?
Here's a working JSFiddle example: http://jsfiddle.net/f7DRh/2/
You can set the image size to container by specifying:
background-size:100% 100%;
That way it will always keep it within container's width and height.
Reference:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can also use the traditional replacing your div
<div class="container">
<div class="header">
</div>
becomes
<div class="upcon">
<img src="http://yourimage.com" style="width:100%" />
</div>
By the way, with this method the browser tries to render the image correctly if the user has a resoltion smaller than what your are asking (1050px). It won't crop it.
Related
I'm trying to get my head round Bootstrap background images. Can anyone help on the right syntax for displaying a background image when the file is local. Specifically I've got two alternative lines in my page html
<body class ="bg-image" style="background-image:
url('https://mdbootstrap.com/img/Photos/Others/images/76.jpg');height:100vh;">
<body class ="bg-image" style="background-image:
url('/wwwroot/Images/gymEquipment.jpg');height:100vh;">
The first one works and the second local one doesn't. Any corrections greatly appreciated.
Thanks,
Nick
Full page background image
we can easily make this background image to cover the full available space and make it a full-page background image.
Just replace height: 400px; with height: 100vh;
vh stands for viewport height.
height: 100vh; means 100% of available height.
<!-- Background image -->
<div
class="bg-image"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp');
height: 100vh;
"
></div>
<!-- Background image -->
Note: If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website.
For More Information: https://mdbootstrap.com/docs/standard/content-styles/background-image/
I am trying to show image from my PC in my website using html file using css. The css, the image, and the html file are in the same directory the image is shown inside the web browser inspector as shown but not showing in the page it self Inspected Element
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo"></div>
The div has no height — there is no explicit height in CSS and there is no content in normal flow to give it a height from the height: auto it gets by default.
Since it has no height, it is 0 pixels tall. Multiply the height by the width and you get a box that is 0 square pixels.
With a canvas size of 0, there is no space to display the image on.
Do something to give it a height.
.logo {
background: url(https://placekitten.com/100/100);
}
<div class="logo">
Here is some content.
</div>
That said, a logo is something that conveys information. It isn't decorative. You should express it with HTML not CSS, and include alt text.
<div class="logo">
<img src="https://placekitten.com/100/100" alt="Kitten Inc.">
</div>
The "logo" class must have a height in order to show its contents, you have several ways to set up the height:
01
inside your css, go to '.login' and between{ } write : height:100px;
result
.logo{
height:100px
}
02
Inline like this
<div class="logo" style="height:100px"></div>
03
Using jQuery, like this
$('.logo').height(100);
or
$('.logo').css('height','100px');
I am building a few websites and always have this same problem with css.
I have two images inside a div container.
When i put for example a text inside a div the div takes the heigth of the text but when i put an image in for some for me unknown reason the div suddenly seems to have a default heigth.
As you can see i have made the size of the images responsive in my css. I ve involved a color on the div just to give a clearer look on what happens.
When i narrow my browser screen the heigth of the div stays equal ( thus not being responsive) and for some reason the images are pushed down inside the div.
How can i solve this.I want the div container height to be responsive as the images inside are and holding the same height as the images and as i narrow the browser screen.
Last but not least ... what is it that i do not understand ?
Thank you for helping me out.
My code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="background-color:red;">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
</div>
</body>
</html>
If you want the parent div to have a certain size, you should enforce dimension on the div and inherit its properties to its children...
div{
height: 50vh;
width: 50vw;
background: red;
}
div>img{
height: 100%;
width: 100%;
}
<div>
<img src="image.jpg" alt="text">
</div>
you should try adding display: block; to <img> tag.
I hope this help.
If you aren't using Bootstrap or another css framework, maybe you need to add reset.css file to your project. Example of reset: https://meyerweb.com/eric/tools/css/reset/
Please check this. I think it will help you. codepen
div{background-color:red;width:200px;overflow:hidden;}
div img{height:auto; max-width:100%;display:block;}
<div>
<img src="image" alt="text">
</div>
Try using max-width:100% on the image. This will keep it's size limited to it's parent size.
I am attempting to set an image as the background and have it auto-resize and auto-center when the window changes size. Right now I have the auto-resize and auto-center working perfect, but I have no clue how to make it my background image. I had to replace all opening and closing symbols with the PLUS (+) symbol. My current code is as follows:
<div style="text-align: center;">
<img src="amazing.jpg" style="max-width: 100%; height: auto;" alt="Epoxy Flooring of NY" />
</div>
Any suggestions to make it the background instead of just a picture taking up the whole screen? I need the words on top of it, not under it.
Welcome to the stackoverflow-community :)
Just use the background-image-property instead of an <img>-tag.
<div style="background-image:url('amazing.jpg')">
<!-- your text here -->
</div>
For more information See here and here.
Note:
If you use background-image instead of <img> you will not see anything unless you give the <div> a height, by either filling it with text or/and setting it's height of, for example, 100px.
There is two ways to do it one using the css background img property and the other using the HTML img tag.
https://jsfiddle.net/pdhgLap8/
Basically what you need to add to use background images is
background-image: url("https://i.imgur.com/SebQr4d.jpg");
background-size: contain;
background-repeat: no-repeat;
This will set the background image
make it so it is only as large as the div it is in
and make it so it doesn't repeat to fill the div
I have an image whose size I know.
<img class="example" src="img.jpg" width="1024" height="768" />
I want to have the width and height attributes set so it can layout where the image will be before it's downloaded. The image may take a second or two to come in, so when it does, I don't want the page to suddenly jump.
However, I also want the image to have width: 100%. Is there a way to achieve this using CSS?
I tried
.example {
width: 100%;
height: auto;
}
However, this ignores the aspect ratio I specified in the HTML. Is there a way I can use the width and height attributes defined in the HTML to keep the aspect ratio, but have the image to have width: 100% (i.e. the width of the parent)?
I don't want to use JS to achieve this, I don't want to hard code the proportions in CSS, and I'd rather not do any margin/padding hacks to achieve this.
Edit
Really, I'm just seeing if there's a better way of doing it than this,
https://jsfiddle.net/s6gkonbh/
[Update: updated link to fix broken external image url]
JSFiddle Demo
<div style="width:356px; height:452px; background-color:yellow">
<img class="example" src="https://live.staticflickr.com/1427/1370476027_aaf0621679.jpg" width="100%" />
</div>
just provide the width and height to the parent container division which will occupy the space of the image's dimensions while the image will load.
and set the width of the image to 100% and it will take height according to aspect ratio. Just set the background color of your parent div to white or something to blend with the background.
JSFiddle Demo
HTML:
<div style="width:500px; height:300px; background-color:yellow">
<img class="example" src="http://www.finnchat.com/app/uploads/2015/10/Blogi44_metakuva.jpg" width="100%" />
</div>
NB: image copyrights are with their respective owners.
Hi please try this remove the height and width from img tag
<img class="example" src="img.jpg" />
and css
.example {
width: 100% !important;
height: 100% !important;
}
The only way is by using javascript. Just set width 100% in css, then with javascript get the imatge width an multiply by the aspect ratio to get the desired height.