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.
Related
I wanted to create a box with content (images + text) inside with parallax background. I improvised my box from this login page tutorial: https://www.youtube.com/watch?v=HV7DtH3J2PU and ended up with this:
.box{
width: 700px;
padding: 40px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
border-radius: 12px;}
the problem is, when the content exceeds a certain amount, which is irregular, the box goes through the top. the original code used thetop: 50% to deal with this, but since every page has different content, currently i have to manually set the percentages. is there a way to fix this?
edit: and for the parallax, i just added
body {
margin-left : 0px;
padding : 0px;
color: white;
width: 100%;
background-image : url(../pg/images/pg_home_background.png);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
edit 2: here is the html code
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="box">
<h4>title</h4>
<p>....some long text and content...</p>
<img src="image.png" width ="854", height ="480">
<p>....some long text and content...</p>
<img src="image.png" width ="854", height ="480">
</div>
</body>
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 am new to web design and for a class I am creating a site for a restaurant and I made my mockup but I am having issue (or maybe it's not possible) about having my image display as I do in my mockup (image to follow)
Here is the top of my mockup
I want to have the header 100% (figured that out)
the image 100% width
the image is 1480x808
and with this code it stays 100% width but the height isn't matching up with my next section (it either pushes it off the page entirely or in other resolutions has a big white gap between it and the next section)
Could someone point me in the right direction here?
Would really appreciate it
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header {
height: 100px;
background-image: url(_images/headerpattern.jpg);
background-repeat: repeat;
}
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
}
#redbar {
height: 10px;
width: 100%;
background-color: #94201f;
}
#slogan {
height: 207px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainpicture"><img src="_images/mainpic.jpg" alt="" width="100%"/></div>
<div id="redbar"></div>
<div id="slogan">Content for id "slogan" Goes Here</div>
<div id="redbar"></div>
</div>
</body>
</html>
try removing the height and max-height property from #mainpicture
Update
For the red bar I'd remove them from your markup and use border-bottom on the first image and border-bottom on the second
Here's a fiddle
remove the height from #mainpicture.
or
if you need the height you can try putting the image in background of #mainpicture and set background size cover..Leave the #mainpicture div blank
like
<div id="mainpicture"></div>
css
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
background-image:url(_images/mainpic.jpg);
background-position:center top;
background-size:cover;
}
If you want your page to be responsive, you must have some rules.
You want the image to show, as well as the slogan area. But the page can be seen in several devices, with several sizes.
So, you should use relative dimensions, so your goal can be achieved trought the many devices...
Place the image inside a div with relative dimensions...
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>
First of here is what I'm trying to achieve :
http://img801.imageshack.us/img801/1516/sitelayout.png
I just cant get the content div working as I would like it, when you get too the page the div should stretch too the bottom if there isn't enough content too fill it, if there is too much content it should push down the footer. Here's what I have so far:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>site</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="headerBG"></div>
<div id="header"></div>
<div id="content">
<div id="contentTop"></div>
<div id="contentCenter"></div>
</div>
<div id="footerBG"></div>
</div>
</body>
</html>
CSS
html,body{ height: 100%; margin: 0; padding: 0; }
body{
background-image:url('images/bg.png');
background-repeat:repeat;
}
#container{
position: absolute;
background-color: green;
height: 100%;
width: 100%;
}
#headerBG{
position: absolute;
background-image:url('images/header_bg.png');
background-repeat:repeat-x;
height: 297px;
width: 100%;
}
#header{
position: relative;
margin-left: auto;
margin-right: auto;
background-color: black;
width: 780px;
height: 200px;
}
#content{
position:relative;
margin-left: auto;
margin-right: auto;
width:780px;
height:70%;
}
#contentTop{
width:780px;
height:30px;
background-image:url('images/content_top.png');
background-repeat: no-repeat;
}
#contentCenter{
width:780px;
height:100%;
background-image:url('images/content_bg.png');
background-repeat: repeat-y;
}
#footerBG{
position: absolute;
bottom:0px;
background-image:url('images/footer_bg.png');
background-repeat:repeat-x;
width: 100%;
height: 144px;
}
Sorry if its a bit unclear, I've been tinkering with it a lot so this code might be a bit disorganized. I've been staring it to death and its starting to get blurry in my head >_<
Anyway, I would really appreciate any insights you might have.
yay Coming back to html+css after a year or two yay
for ease i'd just look in to Faux Columns
set the #content to have a background image that resembles the effect you want.
you'll also probably want to look in to a sticky footer
See if this works for you: http://jsfiddle.net/brianflanagan/jhvBt/ IE mileage may vary (with the min-height property). If you absolutely need the footer positioned exactly at the bottom of the browser window and the content div stretched, I'd recommend using a JS solution to calculate assorted heights as needed.