For some reason when I tried to make a background and add images to it the images just dissapear.
.Background1{
position:relative;
top:0%;
left:0%;
height:100%;
width:100%;
content:url("/assets/backgroundlayer1.jpg")
}
.Background2{
position:absolute;
top:35%;
left:25%;
height:75%;
width:50%;
}
<div class="Background1" name="Background1" id="Background">
<img class="Background2" name="Background2" id="Background" src="/asset/Background2.png">
</div>
Edit: I want background2 to fit on background1.
Use the background-image property instead of the content property. The content property is overiding the content of your div, thus removing the image.
.Background1{
position:relative;
top:0%;
left:0%;
height:100%;
width:100%;
background-image:url('/assets/backgroundlayer1.jpg')
}
You have two things wrong .. You are calling the background image with content when you should be using the background property.
CONTENT PROPORTY
BACKGROUND PROPERTY
The second, you're trying to assign a height percentage where it is not allowed (the element is relative).. You need absolute definition (px or pt for example):
.Background1{
position:relative;
top:0%;
left:0%;
height:600px;
width:100%;
background:url("/assets/backgroundlayer1.jpg") no-repeat;
Related
i am wondering if is it possible to disable pointer event for say half of an element not entirely? for example like picture below..
maybe it would be possible to use another element to overlap that part of element that i want to be disabled but as far as i realized it is impossible through any straight way but we can cover that part of image by another div and then it'll do the trick...
for that we should put our image in a container then set its position to fixed now let's check it out
#container{
position:fixed;
width:150px;
height:150px;
left:0;
top:0;
z-index:5;
overflow:hidden;
}
#container img{
width:100%;
height:100%;
cursor:pointer;
}
#imgcover{
position:absolute;
display:inline-block;
height:250px;
width:150px;
left:50px;
top:8px;
transform:rotate(45deg)
}
and html codes
<div id="container">
<div id="imgcover"></div>
<img src="/forum_corner03.png" />
</div>
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
I have 2 divs and I wanted to resize images inside in those divs but they should allways fill div and constrain proportions.
Like this one:
http://www-07.ibm.com/sg/60/
If you try to resize them, they will allways fill their divs and images will allways keep their proportions.
HTML:
<div class="one">
<img src="imgs/photo1.jpg" class="photo1">
</div>
<div class="two">
<img src="imgs/photo2.jpg" class="photo2">
</div>
CSS:
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
}
.two{
position:relative;
overflow:hidden;
width:50%;
height:50%;
float:left;
}
How do I style those images to look like this?
http://www-07.ibm.com/sg/60/
Site is using jquery plugin for the effect, however you can get the same by css3 background-size:cover property.
What you have to do is :
Remove source image and give it through background and use background-size:cover.
<div class="one">
</div>
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
background: url("path to image") no-repeat center center;
background-size : cover;
}
I could be missing something here, but if I understand your question correctly, you can just add:
width: 100%;
to your img tags and they will always fill the containing div.
Try this,
.one img, .two img {
width:100%;
height:auto;
}
I think you would get the best result by not using the tag, but instead make these background images with the attribute:
background-size:cover;
background-position:center;
I've made my website background image stretch 100% width and height of the browser window, by applying a background image to the body, and remain fixed position. Also, I've created borders that will also remain fixed, using this method: http://css-tricks.com/body-border/
It works ok as you can see here: http://br-webdesigner.com/test/
The only problem is, the background image is stretching right to the edges of the browser window, instead of to the bounds of the body element (or the green area), even though I've got 10px padding on the html element.
It seems making background-size 100% makes the size 100% of the browser window, not of the containing element.
Is there a way to get around this?
Thanks,
So I altered your CSS a bit try using this:
html{
}
body{
padding:30px;
background:url(images/bg2.svg) no-repeat fixed;
background-size:100% 100%;
margin:0;
}
.site-border{
background:#352e2e;
z-index:10;
}
#top{
position:fixed;
top:0;
left:0;
width:100%;
height:10px;
}
#bottom{
position:fixed;
bottom:0;
left:0;
width:100%;
height:10px;
}
#left{
padding:10px;
position:fixed;
left:0;
top:0;
width:10px;
height:100%;
}
#right{
padding:10px;
position:fixed;
right:0;
top:0;
width:10px;
height:100%;
}
I have a div which size may differ time to time.
At I set a background image to tat div which image size is fixed.
But I need to fit the background image to div at any size.
How could be possible thro' CSS.
Thanks in advance!!!
The only way to change a size of an image with CSS is when it's an <img> element.
I mean that you can do something like that:
img#myBG { width:200px; height:100px; }
If you need it to be a background, you should use 'z-index' and put your img under a the element that holds the content.
Something like this:
<div id="holder">
<img id="myBG" src="...." />
<div>my content here</div>
</div>
<style>
#holder { position:relative; width:200px; height:100px; }
#holder div { position:absolute; top:0; left:0; z-index:2; }
img#myBG { width:200px; height:100px; { position:absolute; top:0; left:0; z-index:1; }
</style>
It's not possible with CSS 2.x that's available in most browsers, but CSS 3 has introduced the background-size property. You can read details here: http://www.css3.info/preview/background-size/