I'd like to have an image (kind of logo) positioned in the bottom right corner of my page.
The page is very simple:
the <html> (in red in the drawings)
the <body>
the <header>
the div#content
The header is of fixed height. The #content can have very different height and it changes dynamically.
The CSS I use:
html: {
height: 100%;
}
body {
min-height: 100%;
position: relative;
width: 100%;
background-image:url('http://www.imagespourtoi.com/lesimages/mickey/image-mickey-3.jpg');
background-repeat:no-repeat;
background-size: 100px;
background-position: right bottom;
background-color: grey;
}
header {
width: 50%;
height: 180px;
}
#content {
width: 50%;
}
The HTML:
<html>
<body>
<header>
</header>
<div id="content">
</div>
</body>
</html>
On the left is what happened when the #content height is bigger than the screen, on the right when it's smaller.
The cloud in the drawing represents the background image. You can see on the left that it's displayed in the bottom right corner of the screen, not of the <body> (not the expected behavior).
What am I doing wrong?
NB: I can't reproduce such behavior on JSFiddle.
html tag requires a height declaration as well:
html { height: 100% }
I am new to HTML and Bootstrap and I am trying to learn it. I have came to a situation, where the images don't display at all.
First image should be full background for the first div and second image, smaller, should be in the top right, using bootstrap.
If someone has any idea please give a hand.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.top {
width: 100%;
height: auto;
min-height: 100%;
min-width: 1024px;
background: url('images/img1.jpg') no-repeat;
background-size: cover;
}
.top .text {
position: absolute;
width: 100%;
top: 132px;
right: 351px;
background-image: url('images/img2.jpg') no-repeat;
}
</style>
</head>
<body>
<div class=" top container-fluid">
<div class="row-fluid">
<div class="text col-lg-3 col-lg-offset-5">
<p>Hello</p>
</div>
</div>
</div>
</body>
</html>
Need to put your min-height in .top according to your mobile device or your smallest device not 100%. and .next the height:auto;. also your min-width is too much large value, so please decrease it as your device width.
In the second class you are using a background-image simply say background as in the first one.
.top .text {
position: absolute;
width: 100%;
top: 132px;
right: 351px;
background: url('images/img2.jpg') no-repeat;
border: 1px solid;
}
And you are using "position: absolute" for the second div so the first one have no content and therefore height: 100% will not do anything either put height in pixels or put some content inside the div to make it scale in height.
I am trying to make a layout where the navigation sits in a div on top of an image. Im using z-index to do this. I tried making the image a background image but I couldnt get it to scale properly when changing the size of the browser window.
The z-index seems to be working properly but now my div that would contain the nav no longer floats right.
Anyway to fix this?
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
}
#container{
width: 100%;
height: 1000px;
background-color: yellow;
position: relative;
}
#blue{
margin-top: 20%;
width: 50%;
height: 10%;
background-color: blue;
float: right;
position: absolute;
z-index: 10;
}
#test_image{
width: 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div id="container">
<img id="test_image" src="http://i1370.photobucket.com/albums/ag265/arsinek1/web_development/test_zpsfbvzo3ij.jpg">
<div id="blue"></div>
</div>
</body>
since you use position:fixed; instead of float:right; use:
right: 0;
To make your image responsive the easiest way is to set it do the desired element as a background-image using:
background: url(yourBGimage.jpg) 50% / cover;
Not sure why you use overly the fixed but here's just an example to reflect the above lines (and without the z-index stuff): jsBin demo
For the background as an image approach did you tried?
background-size: cover;
I want to create a header bar at the top of the web-page, give it a background color and then add a logo on it.
So the problem is:
The width of the bar should be the width of the page. Its height
should be the size of the logo (plus some padding added around the
logo image).
Or is there a way to make the bar as big as its
content plus the padding added to the content?
I actually searched SO and found this, I tried to reproduce it into my code but it does not seem to help me.
I have also seen this and this.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div {
position: absolute;
height: auto; //**** When changed to a percent value, it displays
width: 100%;
top: 0px;
left: 0px;
float: left;
background: #000029;
}
.logo {
position: fixed;
top: 5px;
left: 12px;
bottom: 4px;
}
</style>
</head>
<body>
<div class="div">
<img src="http://********Header.svg" alt="Logo" class="logo" >
</div>
</body>
</html>
It just does not display the background color at all, and when I change the value of height to some value in percent, it displays.
So what I want is that the height of the bar should fit to its content i.e. the logo image.
EDIT:-
Remove virtually all of your CSS rules and just use something as basic as:
.div {
background: #000029;
}
.logo {
vertical-align:top;
}
jsFiddle example
change you css code like below:
.div {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding:5px;
}
.logo {
}
see the demo here ---->http://jsfiddle.net/4A7Q9/1/
The style can be something along these lines:
<style>
.div {
width: 100%;
background: #000029;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
.logo {
}
</style>
I want to have a website where I can upload images of different sizes to be displayed in a jquery slider.
I can't seem to fit (scaling down) the image in a containing div. Here's how I'm intending to do it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>
<body>
<div id="wrapper">
<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>
</div>
</body>
</html>
And the CSS
#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}
#im {
max-width: 100%;
}
I've tried to set the max-width of my image to 100% in CSS. But that doens't work.
You can use a background image to accomplish this;
From MDN - Background Size: Contain:
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
Demo
CSS:
#im {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("path/to/img");
background-repeat: no-repeat;
background-size: contain;
}
HTML:
<div id="wrapper">
<div id="im">
</div>
</div>
This is an old question I know, but this is in the top five for several related Google searches. Here's the CSS-only solution without changing the images to background images:
width: auto;
height: auto;
max-width: MaxSize;
max-height: MaxSize;
"MaxSize" is a placeholder for whatever max-width and max-height you want to use, in pixels or percentage. auto will increase (or decrease) the width and height to occupy the space you specify with MaxSize. It will override any defaults for images you or the viewer's browser might have for images. I've found it's especially important on Android's Firefox. Pixels or percentages work for max size. With both the height and width set to auto, the aspect ratio of the original image will be retained.
If you want to fill the space entirely and don't mind the image being larger than its original size, change the two max-widths to min-width: 100% - this will make them completely occupy their space and maintain aspect ratio. You can see an example of this with a Twitter profile's background image.
if you want both width and the height you can try
background-size: cover !important;
but this wont distort the image but fill the div.
I believe this is the best way of doing it, I've tried it and it works very well.
#img {
object-fit: cover;
}
This is where I found it. Good luck!
It's very simple. Just Set width of img to 100%
Hope this will answer the age old problem (Without using CSS background property)
Html
<div class="card-cont">
<img src="demo.png" />
</div>
Css
.card-cont{
width:100%;
height:150px;
}
.card-cont img{
max-width: 100%;
min-width: 100%;
min-height: 150px;
}
I am using this, both smaller and large images:
.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}
I use:
object-fit: cover;
-o-object-fit: cover;
to place images in a container with a fixed height and width, this also works great for my sliders. It will however cut of parts of the image depending on it's.
In a webpage where I wanted a in image to scale with browser size change and remain at the top, next to a fixed div, all I had to do was use a single CSS line: overflow:hidden; and it did the trick. The image scales perfectly.
What is especially nice is that this is pure css and will work even if Javascript is turned off.
CSS:
#ImageContainerDiv {
overflow: hidden;
}
HTML:
<div id="ImageContainerDiv">
<a href="URL goes here" target="_blank">
<img src="MapName.png" alt="Click to load map" />
</a>
</div>
Several of these things did not work for me... however, this did. Might help someone else in the future. Here is the CSS:
.img-area {
display: block;
padding: 0px 0 0 0px;
text-indent: 0;
width: 100%;
background-size: 100% 95%;
background-repeat: no-repeat;
background-image: url("https://yourimage.png");
}
I have met the same issue and fixed using the following CSS.
Hope this would help you.
max-width: 100%;
max-height: 100%;
width: max-content;
height: max-content;
.parent {
border: 1px solid black;
width: 200px;
height: 100px;
}
.image {
max-width: 100%;
max-height: 100%;
width: max-content;
height: max-content;
border: 1px solid black;
}
<div class='parent'>
<img class='image' alt='' src="https://avatars.githubusercontent.com/u/95250818?v=4"></img>
</div>