<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-->
Related
CSS background image is not showing.
This is my html code:
<div class="container-fluid p-c b-g">
<div class="row">
<div class="col-sm-12 text-infom">
</div>
</div>
</div>
</div>
css code
.b-g{
background-image: url(../images/bg/trading.jpg);
width: 100%;
}
add some height to div it'll show
.b-g{
background-image: url(https://pbs.twimg.com/profile_banners/1285511592/1470391779/1500x500);
background-size: contain;
background-repeat: no-repeat;
height: 300px;
}
<div class="container-fluid p-c b-g">
<div class="row">
<div class="col-sm-12 text-infom">
</div>
</div>
</div>
May be your keeping file path is wrong, check file loading or not by inspect in browser.
<style type="text/css">
.b-g {
background-image: url("http://tipsforbeauties.com/gallery_gen//5c5f13b27a80afa16ca4184aec9a26c1_324.7619047619x220.jpg");
width: 100%;
}
</style>
<div class="b-g">
</div>
For fit image to background (element, body or whatelse):
.b-g {
padding: 0px;
background-image: url(../images/bg/trading.jpg);
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
Or you can add background-size property (remove width property).
background-size: 100% 100%;
And last one you can use like this:
background-image: #000 url('../images/bg/trading.jpg') repeat center center;
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 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
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;
}
Is it possible to make a <div> element contain a background image, and if so, how would I go about doing this?
You mean this?
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>
You can do that using CSS's background propieties. There are few ways to do it:
By ID
HTML:
<div id="div-with-bg"></div>
CSS:
#div-with-bg
{
background: color url('path') others;
}
By Class
HTML:
<div class="div-with-bg"></div>
CSS:
.div-with-bg
{
background: color url('path') others;
}
In HTML (which is evil)
HTML:
<div style="background: color url('path')"></div>
Where:
color is color in hex or one from X11 Colors
path is path to the image
others like position, attachament
background CSS Property is a connection of all background-xxx propieties in that syntax:
background:
background-color
background-image
background-repeat
background-attachment
background-position;
Source: w3schools
Yes:
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>
Use this style to get a centered background image without repeat.
.bgImgCenter{
background-image: url('imagePath');
background-repeat: no-repeat;
background-position: center;
position: relative;
}
In HTML, set this style for your div:
<div class="bgImgCenter"></div>
Use like ..
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
You can simply add an img src Attribute with id:
<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>
and in your CSS file (stretch background):
#backgroundimage
{
height: auto;
left: 0;
margin: 0;
min-height: 100%;
min-width: 674px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
<div class="foo">Foo Bar</div>
and in your CSS file:
.foo {
background-image: url("images/foo.png");
}
<div id="image">Example to have Background Image</div>
We need to Add the below content in Style tag:
.image {
background-image: url('C:\Users\ajai\Desktop\10.jpg');
}
For the most part, the method is the same as setting the whole body
.divi{
background-image: url('path');
}
</style>
<div class="divi"></div>