I have the following HTML which will work to display a banner and an image. The problem is that I want the image to resize with the window. I thought that the style="height/width" properties would take care of this but however only width seems to work.
HTML:
<!DOCTYPE html>
<html>
<body>
<h3 style="text-align: center;">This company has exceeded the daily limit of Google Street Views</h3>
<img src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=40.201316987470086,-83.98099300983233" style="width: 100%; height: 100%"> </img>
</body>
</html>
when clicking the bottom of the window and dragging upward, the image should resize vertically along with horizontally so that no scroll bars need to be displayed on the page.
You can do it if you're willing to set a fixed height on your heading element.
html,
body {
height: 100%;
position: relative;
}
.wrapper {
position: absolute;
top: 80px;
bottom: 0;
right: 0;
left: 0;
text-align: center;
background: pink;
}
.wrapper img {
max-width: 100%;
max-height: 100%;
}
<h3 style="text-align: center;">A Lovely Heading</h3>
<div class="wrapper">
<img src="http://lorempixel.com/1200/800" />
</div>
If you wanted the image to entirely cover the bottom area, you'll need to apply it as a background:
html,
body {
height: 100%;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
}
.wrapper {
position: absolute;
top: 80px;
bottom: 0;
right: 0;
left: 0;
text-align: center;
background-image: url(http://lorempixel.com/1200/800/nature);
background-size: cover;
background-position: center bottom;
}
<h3 style="text-align: center;">Heading</h3>
<div class="wrapper">
</div>
Don't use style, the image tag as width and height built in.
<img src="" width="100%" height="100%">
Also, I don't know why you have a second closing tag here "height: 100%">>"
Related
I want to use an img on my page as background-image of an image-slide banner. The reason is to include alt-text for accessibility reasons. To move the img in the background, I have to give it a negative z-index. Otherwise, it always shows on top of the content.
Tag-Lines are included on the banner as h1 titles. These titles can't be selected or interacted with, once the banner is in the negative z-index. So far, there is no problem. However, some of the background-images I want to include on some pages, were not taken by myself, so they need an image credit. The link which leads to the original-photo on the image-credit can't be clicked on. Optically, it's shown above the image and the banner, but it can't be clicked on.
So is there a way to make the content of the banner interactable. I could include the image as background-image, but in this case, how can I include alt-text to the background-image?
.slider {
width: 100%;
position: relative;
height: 600px;
z-index: -1;
}
.banner {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.banner-image {
position: fixed;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 640px;
z-index: -2;
}
.image-credits {
background-color: black;
color: white;
padding: 2px 8px;
margin: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.image-credits a {
color: white;
}
<div class="slider">
<div class="banner">
<img class="banner-image" src="https://via.placeholder.com/1280" alt="Description, what you see">
<div class="content">
<h1>Some tagline</h1>
<p class="image-credits">Photo by <a href="image-source" target="blank">Photographer</a\></p>
</div>
</div>
</div>
I tried setting the page up with positive z-values. But then the background-image always shows on top of the rest of the content on the page, and the content remains interactable. Also, I applied pointer-events:none; to all other elements of the slider, except of the image-credits. That also didn't work out.
Seems its not workin when you set z-index both parent and child elements. Try to remove z-index from .slider and it should work.
If you specify z-index on an element, it gonna impacts his descendants too. If you specify a negative z-index, then the corresponding elements are going "behind" <body> element. Then all your click are on <body> element. As <body> have a transparent background, you could have the impression click on your link, but you are not.
To be able to click on your link, it should have no element with greater z-index in front. Below, I have made you an example without z-index on .slider (which is one of the ascendants of your link, so it specifies indirectly z-index for him)
.slider {
width: 100%;
position: relative;
height: 600px;
}
.banner {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.banner-image {
position: fixed;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 640px;
z-index: -2;
}
.image-credits {
background-color: black;
color: white;
padding: 2px 8px;
margin: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.image-credits a {
color: white;
}
<div class="slider">
<div class="banner">
<img class="banner-image" src="https://via.placeholder.com/1280" alt="Description, what you see">
<div class="content">
<h1>Some tagline</h1>
<p class="image-credits">Photo by <a href="#" target="blank">Photographer</a\></p>
</div>
</div>
</div>
I figured out how to fix the icons to the bottom of the page but now for some reason only one will show. I've tried to put them each in their own div but still not working?
HTML:
<div style="position: relative">
<img src ="./images/tw.jpg">
<img src ="./images/ig.jpg">
<img src ="./images/fb.jpg">
</div>
CSS:
img {
height: 40px;
width: 40px;
position: fixed;
bottom: 0;
text-align: center;
}
<div class="container">
<img src ="./images/tw.jpg">
<img src ="./images/ig.jpg">
<img src ="./images/fb.jpg">
</div>
<style>
.container {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
.container img {
height: 40px;
width: 40px;
}
</style>
add position:fixed in div
div {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
remove 'position:fixed' from css or replace it with 'position:relative'
So, I'm trying to create a layout where the paragraph tag should always be aligned to a specific part of the background image.
Link with working example https://codepen.io/marcelcruz/pen/BRgaVL
I want the text to be always inside the crystal ball, but once I resize the window the background shrinks, the crystal ball goes up and they're not aligned anymore.
Is there a way of making the background only shrink on both sides, but not on the top and bottom? Some other better approach for this?
This part of the code looks something like this:
* {
padding: 0;
margin: 0;
}
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat;
background-size: cover;
height: 100vh;
}
#text {
color: red;
background: yellow;
width: 60px;
position: absolute;
top: 900px;
left: 50%;
}
<div id="main">
<p id="text">TEXT COMES HERE</p>
</div>
Thanks!
This could be done with an <img> tag and relative positioning, example
.container img {
max-width: 100%;
}
.img-container {
display: inline-block;
position: relative;
}
.positioning {
position: absolute;
left: 45%;
bottom: 30%;
background-color: red;
color: white;
padding: 4px;
font-size: 17px;
line-height: 18px;
}
<div id="container" class="container">
<div class="img-container">
<div class="positioning">
Some Text
</div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg" />
</div>
</div>
Hope this helps!
<html>
<head>
<style>
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat;
background-size: 100% 100%;
}
#text {
color: red;
background: yellow;
width: 60px;
position: absolute;
left: 50%;
top: 80%;
}
</style>
</head>
<body>
<div id="main">
<p id="text">TEXT COMES HERE</p>
</div>
</body>
</html>
It works, when You set background-size: 100% 100%;
What more? Click link_for_more
Have created a full screen image, that is filling the full site when you enter my website. But I can't make text over the image so that I can have a read more button and a welcome to name.
This is my code:
<div class="row">
<div class="col-md-12-">
<img class="img-responsive" style="min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; " src="~/Content/img/maxresdefault%20(1).jpg" />
</div>
</div>
Any suggestions on how I add text over an image?
It needs to look like this:
There are a few ways:
div with text inside and style="background: url('my_img.png');".
a div with 'position: absolute; z-index: -1;' behind it that contains the img or background img.
Just add position property value of absolute, and a positive z-index property value to the text container only. See the example below and adjust as needed.
.row {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.col-md-12 {
width: 100%;
height: 100%;
}
.col-md-12 img {
width: 100%;
height: auto;
}
.text {
position: absolute; /* Make stack-ability possible */
z-index: 3;
top: 100px;
left: 50px;
color: white;
font-size: 36px;
font-weight: bold;
background: black;
opacity: 0.70;
padding: 10px;
;
<div class="row">
<div class="col-md-12">
<img src="http://i.stack.imgur.com/xvCoo.jpg">
</div>
<div class="text"> Whatever your text is goes here </div>
<div>
There are a couple of ways to do it, the second option IMO is the simplest.
Positioned absolute
Offset from top with margin and center aligned button/content
http://codepen.io/anon/pen/jbBVeB
body{
background: url(http://placehold.it/1600x900);
}
.welcome{
margin-top: 50px;
text-align: center;
}
with the background-image method your CSS code would be:
body{
background-image: url('~/Content/img/maxresdefault%20(1).jpg');
background-position: center;
background-attachment: fixed;
}
put that on CSS and you're done!
I'm trying to separate a text header from a banner for an eBay listing. Here's the code:
body {
background-color: #cccccc;
}
#banner {
position: top;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 275px;
z-index: 1;
}
<div id="banner">
<img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>
<h1 style="font-family:helvetica">[Header text]</h1>
I've tried to add line breaks before the header to separate the header from the banner, but this isn't consistent across all viewing monitors. I converted px to em in the "height" and added the four breaks, but this doesn't work either. Thanks so much.
Try implementing margin-top.
<style>
body {
background-color: #cccccc;
}
#banner {
position: top;
left: 0px;
right: 0px;
width: 100%;
height: 275px;
z-index: 1;
}
h1{
margin-top:150px;}
</style>
<div id="banner">
<img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>
<h1 style="font-family:helvetica">[Header text]</h1>
Update: You can also use percentages for margin-top to get a more consistent view on different browsers. Alternatively you can just put it into one div. You then wouldn't need to specify margin-top.
body {
background-color: #cccccc;
}
#banner {
position: top;
left: 0px;
right: 0px;
width: 100%;
height: 275px;
z-index: 1;
}
<div id="banner">
<img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
<h1 style="font-family:helvetica">[Header text]</h1>
</div>