I am making one div in that I want to align image on right of that div and fill up color of same image on other remaining free place of div but image is not aligning right to it.
The main problem is that I don't want to use <img> tag inside div, I want to to use image as background image of that div and that also should be right align.
My Fiddle
code :
<div class="inq_parent">
<div class="inq_header">
</div>
</div>
.inq_parent
{
height:560px;
width:90%;
background-color:#000;
margin-left:5%;
}
.inq_header
{
height:100px;
width:100%;
background-color:#333333;
border-bottom: 1px solid #f2f2f2;
background-image:url(http://i.stack.imgur.com/x9be2.png);
background-repeat:no-repeat;
text-align:right;
}
Add background-position:right;
.inq_header
{
height:100px;
width:100%;
background-color:#333333;
border-bottom: 1px solid #f2f2f2;
background-image:url(http://i.stack.imgur.com/x9be2.png);
background-repeat:no-repeat;
background-position:right;
text-align:right;
}
or in short
background:url(http://i.stack.imgur.com/x9be2.png) no-repeat right;
DEMO
Updated
.inq_header
{
height:100px;
width:100%;
border-bottom: 1px solid #f2f2f2;
background:#333333 url(http://i.stack.imgur.com/x9be2.png) no-repeat right;
}
Updated DEMO
Related
I want to increase the distance between the border and the background-image ... I tried to add padding: 20px; but it doesn't work.
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width: 100px;
height: 75px;
display: block;
}
.Tab1:hover {
border: 1px solid green;
}
<div class="Tab1"></div>
You can increase the space between the border and the background image with padding and background-clip:content-box; (see MDN for more info).
Also don't forget to center the background image with background-position:center;
.Tab1 {
background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
width:100px;
height:73px;
display:block;
padding:20px;
background-clip:content-box;
}
.Tab1:hover {
border:1px solid green;
}
<div class="Tab1"></div>
If you also want to avoid the position snap on hover created by the border, you can add a transparent border and only change the colour on hover :
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat: no-repeat;
background-position: center;
background-clip: content-box;
width: 100px;
height: 75px;
display: block;
padding: 50px;
border: 1px solid transparent;
}
.Tab1:hover {
border-color: green;
}
<div class="Tab1"></div>
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat:no-repeat;
background-position:center;
background-clip:content-box;
width:100px;
height:75px;
display:block;
padding:20px;
}
.Tab1:hover{border:1px solid green;}
This is what you need, you first align the background to the centre of the box and then add a padding with the padding CSS, as you originally tried to do. The background-repeat property will stop the background repeating into the padding of the CSS.
Please also remember to add units to the padding value, just in case you had tried to do what you'd written as adding padding:20.
You can check here the space between image and border...
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width:100px;
height:75px;
display:block;
padding:15px;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
}
.Tab1:hover{border:1px solid green;}
<div class="Tab1">
</div>
thanks
css code
.Tab1 {
background:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
background-repeat:no-repeat;
width:100px;
height:75px;
display:block;
padding:15px;
}
.Tab1:hover {
border:1px solid green;
margin-left:-1px;
margin-top:-1px;
}
Is it possible to achieve this slanted sidebar layout with CSS? The right side would be the main content where I assume the slanted sidebar layout could overlap the extra. Thanks for reading!
Try something like this..
#shape {
border-top: 100px solid green;
border-right: 20px solid transparent;
height: 0;
width: 100px;
}
Fiddle: http://jsfiddle.net/3wLJj/1/
more info: http://css-tricks.com/examples/ShapesOfCSS/
If you are going to add some text, or elements inside the green div, it is better to do it this way than creating only a shape.
Fiddle
.main{
width:60%;
background:green;
height:400px;
position:relative;
color:white;
}
.main:after{
content:'';
position:absolute;
right:-40px;
border-top: 400px solid green;
border-right: 40px solid transparent;
}
.side{
margin-left:10%;
width:30%;
}
I have a small text in the footer. The text is aligned to right but i want the text to move up slightly? how can I do that? my code
#foot tag {
width:1000px;
height:30px;
padding:10px;
border:5px solid white;
margin:0px;
text-align:right;
padding-top: 10px;
}
#foot tag {
width:1000px;
height:30px;
padding:10px 10px 20px 10px;
/* You can adjust the above 4 values to add padding to top, right, bottom and left */
border:5px solid white;
margin:0px;
text-align:right;
}
You can do a couple things, it's tough to say without seeing the live site.
1) decrease the top padding by changing:
padding: 5px 10px 10px 10px;
2) use a negative top margin:
margin: -5px 0 0 0;
You can try this. Top and left css property will move you p in parent div
<div style="position: relative"><p style="position: absolute; top: 1px"></p></div>
i want to center one button up and the other down. how can i edit my css to achieve this.here is
css-
#ContactForm .button {
margin-left:8px;
margin-left:9px;
float:right;
margin-right:2px;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px;
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}
html-
<div>
send
clear
</div>
Here's a jsfiddle with what you want.... http://jsfiddle.net/xgdVM/
you can set the text-align of the container to center
and set the display property of the buttons to block..
CSS:
#form{text-align:center;}
a{display:block;}
HTML
<div id="form">
send
clear
</div>
OR if your buttons have a set witdth i.e width:70px; then you can just give them the css property margin:0 auto; and they will be centered by applying equal margins to the left and right
http://jsfiddle.net/xgdVM/2/
If you mean center horizontally:
#ContactForm .button {
margin: 0 auto; /* centers, provided there's a width set */
display: block;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px; /* width set */
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}
How can I make the background of .post_headline_signup the same height as the background of the paragraph inside the div.
Here is my code:
<div class="post_headline">
<p>Hello world<span class="post_headline_signup">text inside span</span></p>
</div>
This is my css:
.post_headline {
background:url(images/signup_bg.jpg) repeat-x;
border-left:1px solid #555;
border-right:1px solid #555;
padding-left:1em;
height:2em;
line-height:2em
}
.post_headline p {
text-transform:uppercase
}
.post_headline a {
font-weight:bold;
background:url(images/signup.jpg) repeat-x #900;
border-left:1px solid #000;
border-right:1px solid #000;
padding:1.2em; - **THE PROBLEM IS HERE - ONLY PADDING WORKS, LINE HEIGHT OR DIV HEIGHT DOESN'T**
margin-left:1em
}
.post_headline a:hover {
color:#FFF;
text-decoration:underline
}
Ty!
background images cannot (in css2) stretch to fit their container. if you need it to stretch then you will have to have it as an <img/> (which is not great either (presentation vs content) however that is a limitation of css2. Css3 may offer background stretching but I dont think I have seen it)