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>
I want to create a navigation page where 3 images are displayed as diagonal stripes. My first approach was to use div's and to transform -webkit-transform: skew into shape. The problem is that the first and last image leaves a lot of free space.
My second approach would be to use canvas because it allows me to define the shape freely.
I'm not sure if I can use the images as buttons(onclick event) because the shape would be correct, but the div will remain rectangular. With the consequence that if for example the middle image is clicked and the middle div overlap the first div the first function of the first image is triggered.
Do you know a good way to solve this problem? Do you have a better approach?
The idea:
The stripes should have the +- the same size. Unlike my sketch
As requested here the code fragment. Unfortunately there is not much, as I haven't found a clever approach yet:
html, body{
width: 1024px;
height: 768px;
}
:root{
--preset-screen-width: 1024px;
--preset-screen-height: 768px;
--main-img-width: calc((var(--preset-screen-width) / 3) - 5px);
}
/*
.Hidden-Images {
width: 1024px;
height: 768px;
}
*/
.Hidden-Image_1{
width: 1024px;
height: 768px;
background-image: url(../img/redhead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Hidden-Image_2{
width: 1024px;
height: 768px;
background-image: url(../img/brownhead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Hidden-Image_3{
width: 1024px;
height: 768px;
background-image: url(../img/loecklihead.jpg);
background-size: 1024px 768px;
background-repeat: no-repeat;
display: none;
}
.Image-Stripes-Holder{
width: 1024px;
height: 768px;
text-align:center;
background-color: rgb(93, 129, 39);
overflow: hidden;
}
.First-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: red 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
.Second-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: blue 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
.Third-Image-Holder{
width: var(--main-img-width);
height: var(--preset-screen-height);
border: green 1px solid;
display: inline-block;
-webkit-transform: skew(20deg);
overflow: hidden;
}
<!doctype html>
<html>
<head>
<title>CH.Valette_S1.C1_2019.1850-DE</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/valette_custom.css">
<link rel="stylesheet" href="modules/essential/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="modules/noBouncing/noBouning.js"></script>
<script type="text/javascript" src="modules/fastSwipe/fastSwipe.js"></script>
<script type="text/javascript" src="modules/essential/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/jquery-ui.min.js"></script>
<script type="text/javascript" src="modules/essential/veeva-lib/veeva-library-3.2.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/accelerator/lib/touchy.min.js"></script>
<script type="text/javascript" src="modules/fastSwipe/_vendor/iscroll.js"></script>
<script type="text/javascript" src="modules/essential/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="Hidden-Images">
<div class="Hidden-Image_1">
</div>
<div class="Hidden-Image_2">
</div>
<div class="Hidden-Image_3">
</div>
</div>
<div class="Image-Stripes-Holder">
<div class="First-Image-Holder">
<!--<img class="First-Image" src="assets/img/redhead_small.jpg">-->
</div>
<div class="Second-Image-Holder">
<!--<img class="First-Image" src="assets/img/brownhead_small.jpg">-->
</div>
<div class="Third-Image-Holder">
<!--<img class="First-Image" src="assets/img/loecklihead_small.jpg">-->
</div>
</div>
</body>
</html>
You can try using a map in your HTML to define click areas. Done this in the past and it works perfectly.
Remember to use
<area shape="poly"> for the map and define coordinates for click areas.
More detailed reading with an example can be found here.
because i need to give a constant width & height to my div depending on my background image size,i need to find out that.
here was many solutions for this issue....
like here:
How do I get background image size in jQuery?
here is my code
body{
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-image: url(./mybgimg.png);
}
#a{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 980px;
max-height: 680px;
background-image: url(../myImage.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>
<div class="container">
<div id="a">
<div >
<!-- sth that should place exactly in this div depending on what size is my #a div ... -->
</div>
</div>
</div>
</body>
</html>
how i get background image size of div with #a id ?
Hi I was using a Scrollr jquery plugin made by Alexander Prinzhorn to make a parallax effect. I made a parallax effect happen on full screen, but when I wanted it to happen on a specific div, it doesn't work. The original tutorial is made by Petr Tichy. I hope You can help me out here.
This is the code
css file
.con{
width: 500px;
height: 500px;
overflow: auto;
margin: 40px; background-color: #b3b3b3;
}
body{
padding: 0;
margin: 0;
background-color: #a3a3a3;
}
section{
height: 400px;
}
#slide-1 .bcg{
display: block;
}
#slide-2 .bcg{
display: block;
}
.bcg{
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 500px;
width: 500px;
}
These are script files I included.
<script src="path to jquery/jquery-1.9.1.min.js"></script>
<script src="path to scrollr js /skrollr.js"></script>
<script>
//initialize the scrollr function
$(document).ready( function(){
var s = skrollr.init({
forceHeight: false });
});
</script>
html file
<div class="con">
<section id="slide-1">
<div class="bcg" style="background-image: url('img1.jpg')"
data-center-top="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-anchor-target="#slide-1"
data-emit-events>
</div>
</section>
<section id="slide-2">
<div class="bcg" style="background-image: url('img2.jpg')"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
data-emit-events>
</div>
</section>
</div>
i have a refference like this
http://reverzo.tymberry.com/
my code is like this
<div id="multiscroll">
<div class="ms-left">
<div id="home-left" class="ms-section slide-item full-width full-height fullscreen">
<!-- <div class="container"> -->
<p style="font-size:10em;">Lorem ipsum.</p>
<!-- </div> -->
</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
<div class="ms-right">
<div id="home-right" class="ms-section"></div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
</div>
#home-left{
background-image: url(http://www.reverzo.tymberry.com/wp-content/uploads/2014/08/furgona-home.jpg);
}
.slide-item.fullscreen {
width: 200% !important;
}
.slide-item.full-height {
height: 100%;
}
.slide-item.full-width {
/*width: 100%;*/
position: relative;
overflow: hidden;
}
.slide-item {
display: block;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
background-origin: border-box;
background-repeat: no-repeat;
}
#home-right{
background: transparent;
}
heres my work
https://jsfiddle.net/ob1k3vut/
i wanna set the home image like that. its full screen. but when i scroll. the bakground didnt split. how to do that. it can make it full screen. but when scoling they still stick together.
i cant make the fiddle because i dont know the url of js and css of multi-scroll. so sorry guys. if you gus know the link off online css and js multiscroll, feel free to tell me. ill create it so u can check it