I have to put a background image in a div, if i put only image, it will not show. if i put only height it will be shown.
so in this way it will be shown:
<div id="big" style="background-image:url('base1.png');height:200px;"></div>
if i want to position div and resize image in this way
<div id="big" style="background-image:url('base1.png'); left:519px; top:423px; width:474px; height:205px; z-index:4"></div>
it will be not shown. what can i do? can you help me?
use css
<div id="big"></div>
#big {
display:block;
width:300px;
min-height:300px;
background : url('img/image.jpg') no-repeat 50px 50px;
}
Related
The gear button in the above picture is positioned absolute inside the textarea element, but the text is getting overlapped with it. I don't want to apply padding-right property.
I am new with HTML and CSS. How to stop text getting collapsed with gear button.
I have created a DEMO using another approach.
I have created a wrapper element with relative positioning, gave border to it and set its width to 300px. Then created a textarea element without any border and set its width to 280px in order to position your gear (positioned absolutely, float:right) at the top-right corner, so the text won't overlap you button.
HTML:
<div class='wrapper'>
<textarea class='textarea'></textarea>
<img src='https://cdn3.iconfinder.com/data/icons/unicons-vector-icons-pack/32/settings-128.png' class='img'>
</div>
CSS:
.wrapper{
width:300px;
height:auto;
border:1px solid red;
position:relative;
}
.textarea{
position:relative;
width:280px;
height:100px;
border:0px solid;
resize:none
}
.img{
float:right;
position:absolute;
width:20px;
height:20px;
}
You don't really can get away from padding as this is the right thing to do in your case.
(else please state why don't you want to use padding?)
Check this code out, maybe you'll find it more elegant to use the icon as a background-image.
You could play with the width, height, and padding-right values:
HTML part:
<textarea>hello hksjf askdjfj akldfla </textarea>
CSS Part:
textarea {
width: 100px;
height: 50px;
padding-right: 20px;
background-image: url('http://www.isilo.com/support/manual/iSiloIP/img/gearIcon.gif');
background-position: top right;
background-repeat: no-repeat;
}
Also in jsFiddle:
http://jsfiddle.net/nQkEG/
You can't.
Either use padding-right on the textarea or float the button to the right.
I want to make rounded images like this I have searched and googled but I did not find any solutions to make image rounded.I can do images rounded border like this but I dont know how to make the image itself rounded.Please help
Try this, Change radius by adjusting height and width. height and width should be equal and double of the radius you required
HTML :
<div id="round">
</div>
CSS :
#round{
height:100px;
width:100px;
border-radius:50%;
background:green;
overflow:hidden;
}
Fiddle Demo / updated
Check this for responsive circle DEMO
Use border-radius to achieve what you are looking for.
WORKING DEMO
The code:
img{border-radius:50%;}
If you specifically want a white box with a rounded image in it, you simply make a div with the said width & height you want.
Give it a background color and a border of 1px in the same background color.
Then in the div place an image with borderradius of 50% and width and height of 100% to fill the box and you're done.
Try this: http://jsfiddle.net/fWwgD/
<style type="text/css">
body
{
background-color:black;
}
#box
{
width:300px;
height:300px;
background-color:white;
border: 1px solid white;
}
.circle
{
border-radius:50%;
width:100%;
height:100%;
}
</style>
<div id="box">
<img src="https://www.gravatar.com/avatar/01f40d1a1219433e2f7ab40fab531142?s=32&d=identicon&r=PG&f=1" class="circle">
</div>
I have a centered image in the background, but I need my main background-color to stretch as much as the image and stay at the center.
Here is the css for body background
body{padding:0; margin:0; background:url(/b.jpg) center 10px no-repeat;}
Here is the css for main background
.main{background:#4e4645;}
Ive tried background-position and margin percents with no luck.
You can use margin: 0 auto to center your .main div within the body. Then all you need to do is set the width of .main to be equal to the width of your body's background image.
.main {
margin: 0 auto;
width: 300px;
background: #4e4645;
}
See DEMO.
Is this what you're trying to achieve?
http://jsfiddle.net/aX24s/1/
In the example I'm using two background colours, obviously substitute an image in. I've put 50% opacity on the inner div to show that they're both exactly matched in size (one block is bright green, one is red, so the colours mix).
You have the two backgrounds the same size and overlaid exactly.
HTML:
<body>
<div class="outer_div">
<div class="inner_div">
</div>
</div>
</body>
CSS:
.outer_div {
width:50px;
margin:0 auto;
height:50px;
background-color:#dd0000;
}
.inner_div {
background:#00dd00;
width:100%;
opacity:0.5;
height:100%;
}
I am trying to place a child div over the top of its parent div (including its content)
<div id="footer">
<div id="footer-container">
<div id="icon"></div>
</div>
</div>
#footer {
height:50px;
border-top:3px #666 solid;
margin-top:50px;
}
#footer-container {
height: 30px;
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
}
#icon {
height:30px;
width:30px;
background-color:#666;
}
Now it works if the content of <div id="icon"> is text but if you place a background image in the div it does not. Is there any way to make this work? This maybe explains it better
http://jsfiddle.net/4QxL7/
EDIT
Apologies. It was working all along. I was using PNG's for the images which have 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help
I just tried two methods and they both worked using an oversized image from my site...
<div id="footer">
<div id="footer-container">
<div id="icon"><img src="image url here" width=30 height=30/></div>
</div>
</div>
http://jsfiddle.net/ZkxSM/
and
#icon {
height:30px;
width:30px;
background-color:#666; /*unnecessary now probably...*/
background:url('image url here');
}
http://jsfiddle.net/b6QyX/ (image needs to be resized before hand for this to work maybe... or width and height can be set in the html of the div)
There's nothing actually wrong with your jsfiddle..
Apologies. It was working all along. I was using PNG's for the images which has 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help
I have a header image that repeats across screen, so that no matter the screen resolution the header is always stretched 100%, I have placed the image inside a wrapper div.
Over the top of that DIV I also wish to place the 'logo' such that it is always centred across the top of the screen.
I appreciate this could be done another way and have already tried just having the logo on top of the header in photoshop although i couldn't get the image centred as I would of wished.
Please find my code below:
HTML:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" width="1000" height="200" alt="logo" />
</div>
</div>
CSS:
#wrapperHeader{
position: relative;
background-image:url(images/header.png);
}
#header{
left: 50%;
margin-left: -500px;
background:url(images/logo.png) no-repeat;
width:1000px;
height:200px;
}
Also, I am aware of the properties of margin-left:auto; etc. Although I would be grateful if anyone could explain how to use them appropriately here.
Thanks!
I think this is what you need if I'm understanding you correctly:
<div id="wrapperHeader">
<div id="header">
<img src="images/logo.png" alt="logo" />
</div>
</div>
div#wrapperHeader {
width:100%;
height;200px; /* height of the background image? */
background:url(images/header.png) repeat-x 0 0;
text-align:center;
}
div#wrapperHeader div#header {
width:1000px;
height:200px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:; /* the width of the logo image */
height:; /* the height of the logo image */
margin:0 auto;
}
If you set the margin to be margin:0 auto the image will be centered.
This will give top + bottom a margin of 0, and left and right a margin of 'auto'. Since the div has a width (200px), the image will be 200px wide and the browser will auto set the left and right margin to half of what is left on the page, which will result in the image being centered.
you don't need to set the width of header in css, just put the background image as center using this code:
background: url("images/logo.png") no-repeat top center;
or you can just use img tag and put align="center" in the div