I want to have a blurry background image for a div container. But if I set the blur filter the edges also will get blurry causing the blurred image to overflow it's frame. This is what I tried till now:
.one {
height: 400px;
width: 400px;
border: 1px solid black;
/* background-image: url("https://i.imgur.com/JCyxUxA.jpg"); */
/* background-repeat: no-repeat;
background-position: center;
background-size: contain;
*/}
.a {
background-image: url("https://i.imgur.com/JCyxUxA.jpg");
}
.b {
background-image: url("https://i.imgur.com/O1jVhYH.jpg");
}
.thing {
object-fit: contain;
width: 100%;
height: 100%;
}
.bl {
filter: blur(20px);
}
<div class="one t">
<img class="thing" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>
<div class="one t">
<img class="thing bl" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>
<!-- <div class="one a">
</div>
<div class="one b">
</div>
-->
Try adding overflow:hidden; to its container (class one in your case).
This will hide every part of the children elements that is overflowing its container
Related
<div id="Image">
<!-- <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
</div>
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-repeat: repeat;
}
I've made this code and/but I don't see any image. Why is that?
add dimensions / content to the div. it has no size so the image can't be seen. ( eg. width: 200px; height: 800px)
You may also want to have a look at background-size, here.
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-size: contain;
width: 800px;
height: 200px;
background-repeat: repeat;
background-color: gray;
}
<div id="Image">
<!-- <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
</div>
Here is two solutions:
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-repeat: repeat;
width:100;
height:100;
background-size: contain;
}
img {
width:100;
height:100;
}
<div id="Image">
First solution - This is not a good solution because the img could not be zoomed even using scale:0.11;
</div>
<img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes">
<!--Second solution:Using img and this is good-->
I have some simple HTML and CSS code where I want to have a div with class container and this div need to have a img as background. Inside that parent div I have a dive with class row and inside it I have 2 div classes :class="col-md-3" and col-md-9.
The problem is that now the child divs are not showing container div.
In other words I want my container div be the background and everything is displayed on top of it.
Any suggestions?
HTML:
<div class="container bckgroud">
<div class="row">
<div class="col-md-3">
<h1>here is test for the me</h1>
</div>
<div class="col-md-9"></div>
</div>
</div>
CSS:
body, html {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
width: 100%;
height: 100%;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("../images/backg.png");
background-size: contain;
background-repeat: no-repeat;
padding-top: 66.64%;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
Actual result:
You mean something like this?
Set your container height: 100vh;
and delete the padding, it pushed the divs to the bottom
#charset "utf-8";
/* CSS Document */
body,hmtl{
background-color: #071a0f;
margin: 0;
}
h1{
color: aqua;
}
.bckgroud{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg");
background-size: contain;
background-repeat: no-repeat;
}
<div class="container bckgroud">
<div class="row">
<div class="col-md-3">
<h1>
here is test for the me
</h1>
</div>
<div class="col-md-9"></div>
</div>
</div>
Something like this, perhaps:
body {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
height: 100vh;
background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1)), url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
background-repeat: no-repeat;
}
body, html {
color: white !important;
}
.bckgroud{
background-image: url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bckgroud">
<div class="row">
<div class="col-3">
<h1>
here is test for the me
</h1>
</div>
<div class="col-9">
Foo
</div>
</div>
</div>
I have a square div with a known size.
I want to show an image with an unknown size in it.
I want:
. to use the maximum space in the div to show the image while keeping the size ratio of the image.
. the image to be centered, either horizontally if the image is taller than wider, or vertically if the image is wider than taller.
. I don't want the image to be cropped
. I don't want the image to be stretched and use the whole div
. The image should keep its ratio
I'm fine with either an html img tag or a CSS background image property
I found a solution thanks to #CBroe and his suggestion to use background-size
.container {
width: 100px;
height: 100px;
border: 1px solid black;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.container1 {
background-image: url('http://placehold.it/30x50');
}
.container2 {
background-image: url('http://placehold.it/50x30');
}
.container3 {
background-image: url('http://placehold.it/500x300');
}
.container4 {
background-image: url('http://placehold.it/300x500');
}
<div class="container container1">
</div>
<div class="container container2">
</div>
<div class="container container3">
</div>
<div class="container container4">
</div>
.container {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
}
img {
max-width: 100px;
max-height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="container">
<img src="http://placehold.it/30x50" />
</div>
<div class="container">
<img src="http://placehold.it/50x30" />
</div>
<div class="container">
<img src="http://placehold.it/500x300" />
</div>
<div class="container">
<img src="http://placehold.it/300x500" />
</div>
I have a question that I suspect has a simple answer. I'm using Bootstrap to make a personal webpage, and I'm attempting to divide the background into 3 equal columns (which will all have different images).
I know this could be done with class="col-xs-4" but the issue is that I'd like to keep what's over the background as-is (it's a "col-lg-12" that is responsive).
Is there a way to split my background (again, going to upload images into the 3 panels, and the panels will essentially mask the full images), and still have all the "col-lg-12" heading stuff on top?
Thanks for any help you can give, my current html code is such:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/picture.png" alt="">
<div class="intro-text">
<span class="intohead">Filler Text</span>
<span class="subhead">More detailed, longer filler text for below</span>
</div>
</div>
</div>
</div>
</header>
Basically, there are three columns with background images, and then a cover div that is placed on top of the three columns. You can place anything you like in the cover div. Here's an article about CSS positioning.
.wrap {
width: 100%;
height: 300px;
position:relative;
}
.section {
float: left;
height: 300px;
width: 33.33333%;
}
.one {
background: url(http://placehold.it/200x300/ccc/666/&text=img+1) no-repeat;
background-size: 100%;
}
.two {
background: url(http://placehold.it/200x300/666/ccc/&text=img+2) no-repeat;
background-size: 100%;
}
.three {
background: url(http://placehold.it/200x300/ccc/666/&text=img+3) no-repeat;
background-size: 100%;
}
.cover {
width: 100%;
height: 100%;
/*A background isn't needed, it's just to show that the element is there*/
background: salmon;
opacity: .5;
/* this stuff is key */
position: absolute;
top: 0;
left: 0;
/* place cover on top */
z-index: 10;
}
<div class="wrap">
<div class="cover">Put all you content in here</div>
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
</div>
Run the code snippet and tell me what happens. Is this what you're looking for?
I've got three images that I'm trying to use for a box like this in my website:
http://imageshack.us/photo/my-images/41/examplemg.png/
I am trying to do this with CSS and HTML but I have had no success on my own and have not found any article speaking on how to do this particularly.
I basically want it so that the mid_image repeats when I add content.
To repeat a background-image, you set the CSS background-repeat attribute. In your case you should set it to repeat-y.
Something like this should do it:
HTML:
<div id="top"></div>
<div id="middle">Content here</div>
<div id="bottom"></div>
CSS:
#top {
background-image: url("sometopimage.png");
}
#middle {
background-image: url("somemiddleimagetorepeat.png");
background-repeat: repeat-y;
}
#bottom {
background-image: url("somebottomimage.png");
}
Note Omitted size attributes in the example, since we don't have any measures on your layout. You will however need to add width and height to your elements, to fit your layout.
HTML:
<div class="container">
<div class="top"><img src="top.jpg" height="" width="" alt="" /></div>
<div class="middle">
/* content here */
</div>
<div class="bottom"><img src="bottom.jpg" height="" width="" alt="" /></div>
</div>
CSS:
.middle { background: url('path/to/middle/image.jpg') repeat-y; }
try to create the following html structure
<div id="wrapper">
<div id="top_image"></div>
<div id="middle_image">
text here
</div>
<div id="bottom_image"></div>
</div>
the assign the images as background images to their respective containers
My 2 cents worth
HTML
<div id="container">
<div id="content">Add some content</div>
<div id="bottomImg"> </div>
</div>
CSS
#container {
background-image: url("yourTopImage.png");
background-position: left top;
background-repeat:no-repeat;
padding-top: /*Use Height of top image*/;
width: /*Use Width Of Image*/
}
#content {
background-image: url("yourRepeatingImage.png");
background-repeat: repeat-y;
}
#bottomImg{
background-image: url("yourBottomImage.png");
height: /*Use Height of Bottom image*/;
width: /*Use Width Of Image*/
}
The Lean CSS3 CSS2.1 Version. Wont work in IE7 and below
:after browser support
HTML
<div id="container">
<div id="content">Add some content</div>
</div>
CSS
#container {
background-image: url("yourTopImage.png");
background-position: left top;
background-repeat:no-repeat;
padding-top: /*Use Height of top image*/;
width: /*Use Width Of Image*/
}
#content {
background-image: url("yourRepeatingImage.png");
background-repeat: repeat-y;
}
#content:after{
content: " ";
display: block;
background-image:url("yourBottomImage.png");
height: /*Use Height of Bottom image*/;
width: /*Use Width Of Image*/
}
The Leaner CSS3 CSS2.1 Version. Wont work in IE7 and below
:before/:after browser support
HTML
<div id="content">Add some content</div>
CSS
#content:before {
content: url("yourTopImage.png");
height: /*Use Height of top image*/;
width: /*Use Width Of Image*/
}
#content {
background-image: url("yourRepeatingImage.png");
background-repeat: repeat-y;
}
#content:after{
content: url("yourBottomImage.png");
height: /*Use Height of Bottom image*/;
width: /*Use Width Of Image*/
}
For an ugly as sin demo check out this fiddle
From all the answers you can see there are many ways to skin this cat!
Other than set extra div and backgrounds this is how I would do it..
<div id="side_bar">
<img src="top.jpg" alt="" class="top" />
<div id="middle">
text here
</div>
<img src="bottom.jpg" alt="" class="bottom" />
</div>
Then for the css I'd have
#side_bar {
width: xxxpx;
}
#side_bar .top, #side_bar .bottom {
display: block;
}
#middle {
background: url(middle.jpg) repeat-y;
}