I want to fill the background of a div with a photo img similar to the way you would use CSS background-size cover; but in this case it needs to be an img because this is page content and will eventually be coming from our CMS.
Here is what I have so far: http://codepen.io/anon/pen/XmBRPR?editors=110#0
This is what I want it to look like but I don’t want to use CSS background: http://codepen.io/anon/pen/GpBmYz?editors=110
I’m not using Less and my HTML is more basic than setting an image to fill the background of a div
<aside class="row cross-link">
<div class="col-xs-12">
<a class="cross-link-item" href="#"><h5 class="cross-link-text">Local Events</h5><img class="hero" src="http://ridebike.ws/images/heros/Trance-27.5-003x300.jpg"alt=""/></a>
<a class="cross-link-item" href="#"><h5 class="cross-link-text">Local Events</h5><img class="hero" src="http://ridebike.ws/images/heros/Trance-27.5-003x300.jpg"alt=""/></a>
<a class="cross-link-item" href="#"><h5 class="cross-link-text">Local Events</h5><img class="hero" src="http://ridebike.ws/images/heros/Trance-27.5-003x300.jpg"alt=""/></a>
</div>
</aside>
and
.cross-link {
background-color: #7bafd0;
padding-right: 4%;
padding-left: 4%;
text-align: center;
}
a.cross-link-item {
margin: 10px;
padding: 0;
display: inline-block;
width: 200px;
height: 200px;
background-color: #1f26ab;
background-size: cover;
}
.cross-link-text {
margin: 8px;
padding: 2px;
background-color: rgba(0, 0, 0, 0.59);
color: #FFF;
}
by positioning both the text and the image relative to the div and specifying a width and height on the div the desired effect can be achieved.
check out the code pen: http://mbs.red/postion
Related
I am trying to make a header with a fixed title, horizontally and vertically centred. With a home icon that acts as a link.
The problem is that link is clickable on everything left of the Home icon.
I have tried to replicate the problem in this codepen;
body {
margin: 0;
background-color: #2d2d2d;
}
#header {
margin: 0;
background-color: rgb(171, 228, 250);
height: 10vh;
display: flex;
}
#homeIcon {
position: absolute;
padding-top: 2px;
padding-left: 30vw;
height: 10vh;
}
#headerTitle {
margin: auto;
font-size: 5vh;
color: #2d2d2d;
}
<div id="header">
<a href="">
<img id="homeIcon" src="https://image.flaticon.com/icons/svg/846/846551.svg" alt="homeicon" />
</a>
<h1 id="headerTitle"> title </h1>
</div>
Is there a way to have the link only on the content of the img tag?
In your CSS you are specifying the homeIcon has a padding-left of 30vw. If you change this to margin-left instead, it will no longer be clickable. This is because padding is included inside your element, while margin is outside. See https://www.w3schools.com/css/css_boxmodel.asp.
The css is your problem: you can solve it by changing padding-left: 30vw; to margin-left: 30vw;
This answer may be useful background reading: Difference between margin and padding?
I have an outer div, that has two divs.
One div works as a background and has a background image, and other one works as the content and has a background color of #fff, the one that works as a content has a title and an input.
I was trying make a border for my input , that shows what is behind the content div.
Because the proportions of the the background div changes on hover(on pupose), changing the way the border of the input should look.
So i decided to have a div as the border of the input.
But i have been stuck on trying to make the border to show what is behind the content div.
Here is the code:
#chat_bi{
position: absolute;
left: 0;
top:0;
background-repeat: no-repeat;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
background-size: cover;
z-index: -1;
filter: brightness(60%);
height: 100%;
width: 100%;
transition: 0.5s;
}
#outer_div_chat{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: calc(100% - 400px);
padding: 50px;
}
.chat{
padding: 15px;
z-index: 2;
box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
background-color: #fff;
}
#outer_div_chat:hover #chat_bi{
width: 105% !important;
height: 105% !important;
filter: brightness(95%);
}
#start_up_chat_div{
display: flex;
flex-direction: column;
}
/*text-input*/
.text_input_div{
padding:5px;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
}
.text_input{
outline:none;
padding:2px 4px;
border:none;
width: 100%;
box-sizing: border-box;
}
<div style="height:625px; overflow:hidden;">
<div id="outer_div_chat">
<div id="chat_bi"></div>
<div class="chat">
<div id="start_up_chat_div" >
<span style="padding-bottom: 10px;">Random text</span>
<div class="text_input_div">
<input type="text" class="text_input">
</div>
</div>
</div>
</div>
</div>
I kind of guess that one solution is applying, the same background to the border of the input div, in the same position, and size, but i was wondering if there is another way around, a more proper way around.
You can try something like this:
CSS
.bigcrazydivwithbackground {
background: url('https://images.pexels.com/photos/28477/pexels-photo-28477.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');
}
.crazytitle {
background: white;
padding: 10px;
}
.crazyinner {
border: 20px solid white;
}
.crazyinputwrapper {
margin: 20px;
}
input {
display: block;
width: 100%;
background: white;
line-height: 20px;
border: none;
}
HTML
<div class="bigcrazydivwithbackground">
<div class="crazybox">
<div class="crazytitle">
Title
</div>
<div class="crazyinner">
<div class="crazyinputwrapper">
<input type="text" />
</div>
</div>
</div>
</div>
https://jsfiddle.net/hLphc3nu/
Maybe instead of position: absolute and position: relative, make them both position:absolute so the z-index's will work. Sometimes using a negative z-index might also be the problem.
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.
Most likely a css problem, the images I'm using as backgrounds for each page are repeating & varying in size. The homepage is the only completely functional section.
Here's a live example: http://athenatestingwebsite.tumblr.com/
And here's my html:
<div id="PROJECTSP">
<a id="projects" class="smooth"></a>
</div>
<div id="CONTACTP">
<a id="contact" class="smooth"></a>
</div>
and here's some of my css:
body {
height: 1000px;
}
#projectsp {
height: 1000px;
width: 100%;
background-color: #0a0b38;
display: inline-block;
text-align: center;
background: url("http://i.imgur.com/rrmPP7E.png");
}
#contactp {
height: 1000px;
width: 100%;
height: 100%;
background-color: #0a0b38;
display: inline-block;
background: url("http://i.imgur.com/s9gGzHO.png");
}
background-repeat-y: no-repeat;
add this line after every background image you set. remove
body height,width remove all #id height 1000px or 2000px you set..set height auto.
add this class
div.slogan h1 {
margin: auto;
}
hope all will be fix. without the nav overlay.
Happy Coding . Good luck
For some reason, Bootstrap is messing with the background image on a div.
html code:
<div class="wide">
<div class="col-xs-5 line">
<hr>
</div>
<div class="col-xs-2 logo">
Logo
</div>
<div class="col-xs-5 line">
<hr>
</div>
</div>
CSS:
.wide {
width: 100%;
height: 100%;
height: calc(100% - 1px);
background-image: url(http://wp.df.uba.ar/sociofis/wp-content/uploads/sites/11/2016/08/Epidemias4.png);
background-color: #ccccc1; /* Color if image unavailable */
background-size: cover;
}
.logo {
color: #000;
font-weight: 800;
font-size: 14pt;
padding: 25px;
text-align: center;
}
.line {
padding-top: 20px;
overflow: hidden;
text-align: center;
}
.line hr {
border-color: #000;
}
JSFiddle including Bootstrap.
JSFiddle not including Bootstrap.
I'm trying to replicate this example but to no avail. It's not a problem of jsfiddle as by copying and pasting the exact same code to a new jsfiddle it works with no issues.
Apparently the problem is in the image itself. With the image on the original example the background loads correctly and with the one I'm testing it doesn't.
Your <body> element has a height of zero, and your .wide element is using height: calc(100% - 1px) which means 100% of 0 - 1px is -1px.
Give your body element a height of 100%...
https://jsfiddle.net/w6y2nrfy/
I have looked around a lot for a solution to this but I can't seem to find one.
I have an image that I need to display within a certain set of dimensions. It must be no more than 100% of the width of the container: fine. But when I try to faux crop it to 50% of the container; it is scaled.
An example of the 100% width: http://i.stack.imgur.com/WTisJ.png
And an example of the problem when it is set to only 50% of the container: http://i.stack.imgur.com/J01sF.png
The code:
CSS:
.shopcontent{
margin-top: 120px;
}
.product{
margin: 2px;
display: block;
height: 250px;
width: 300px;
border: 2px solid #7f8c8d;
border-radius: 10px;
overflow: hidden;
}
.prodimg{
max-width: 100%;
max-height: 50%; (The problem line!)
border: 0px solid white;
border-radius: 10px;
}
.prodimgcont{
overflow: hidden;
}
HTML:
<div class="shopcontent">
<div class="product">
<span class="prodimgcont">
<img src="http://u.danmiz.net/xqz" class="prodimg"></img>
</span>
<p>This is a test</p>
</div>
</div>
Thanks for any help: I really have tried to find a way of doing this but nothing seems to work!
If I understand your problem correctly you could achieve the desired cropping effect like so:
HTML
<div class="img_container">
<div class="cropper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQQWvNeCn17lshW3c9Z4PLXlTZe6GPf2oiNrLZQft1nPgld1WYb" />
</div>
</div>
CSS
.img_container {
width:300px;
height:250px;
}
.img_container .cropper {
width:50%;
height:50%;
overflow:hidden;
}
.img_container .cropper img {
width:200%;
height:200%;
}
You use the .cropper div to set the desired 50% width and add overflow:hidden, then set the child img tag to width:200% (100% of grandparent width)
Fiddle: http://jsfiddle.net/6hjL0pat/3/
EDIT:
Updated fiddle with your use case
First of all, your img tag should be self closing. so replace
<img src="http://u.danmiz.net/xqz" class="prodimg"></img>
with
<img src="http://u.danmiz.net/xqz" class="prodimg" />
To your problem. I'd advice you to give the dimensions to the container (change that spanto div by the way) and then assign your image as a background-image, because it is more useful for scaling images, especially with background-size: cover.
HTML
<div class="shopcontent">
<div class="product">
<div class="prodimgcont"></div>
<p>This is a test</p>
</div>
</div>
CSS
.shopcontent{
margin-top: 120px;
}
.product{
margin: 2px;
display: block;
height: 250px;
width: 300px;
border: 2px solid #7f8c8d;
border-radius: 10px;
overflow: hidden;
}
.prodimgcont{
display: block;
max-width: 100%;
height: 50%;
max-height: 50%;
border: 0px solid white;
border-radius: 10px;
background-image: url(http://u.danmiz.net/xqz);
background-size: cover;
overflow: hidden;
}
I created a JSfiddle to show you how to do it.
This is one way to do it.
Let me know if you absolutely need to use an img tag. There is a solution for that too. In any case: you need to assign the dimensions you want to the container of the image, not the image itself - because the image needs to be cut off.
Please note, that background-size: cover won't work in IE8 and lower, unless you use a polyfill.