I want to reduce the background of my H1 font using css.
Here is my css file.
.headline h1 {
font-size: 50px;
background: #fff;
background: rgba(255,255,255,0.9);
background-position:
}
i want to achieve this.
Set your h1 to display: inline-block, and it should work!
After that, if you want to center it again, you need to put text-align: center in the parent element.
Related
How do you align a background icon image if the text is center-aligned? Like a small icon before the text. If it's not center-aligned, I can use something like:
p {
background: url(image.jpg) no-repeat 0 0;
padding-left: 40px;
}
But if I center align it like so:
p {
background: url(image.jpg) no-repeat 0 0;
padding-left: 40px;
text-align: center;
}
The background remains on the left corner while the text is centered (so there's a huge gap in between them). It's possible to use background position, however, if the screen is of a different size than what I use, the background will be overlapped by the text.
You can check the jsFiddle demo:
http://jsfiddle.net/PvL3T/2/
:first-letter pseudo element will play around good, http://jsfiddle.net/PvL3T/7/
p {
padding-left: 40px;
text-align: center;
}
.resize:first-letter {
background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 50%; padding-left: 20px;
}
this will work even into IE6 if you care, but only if there is white space between selector and opening curve bracket. Only for IE6 something like this p:first-letter{... will not work, but p:first-letter {... will
and just in similar way, you may use :first-line
If you're looking to have the icon float inline next to the text, you might want to consider placing it inside the parent tag. Then the background image can float alongside the text regardless of screen size:
http://jsfiddle.net/PvL3T/4/
HTML:
<p><i class="icon"></i>This is a text that is center aligned.</p>
CSS:
p {
text-align: center;
}
p .icon {
background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 0;
width: 12px;
height: 12px;
display: inline-block;
margin-right: 10px;
}
You need to add an line-block displayed element before your text. So it can go with your text content. Example: http://jsfiddle.net/PvL3T/5/
.icon
{
background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat center center;
width: 1em;
height: 1em;
display: inline-block;
}
Try:
background: url(image.jpg) no-repeat center;
or alternatively:
background-position: center;
I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.
Can you help me understanding how to do it?
Here is the CSS I used for the heading:
h3.offer-title, h3#comments, h3#reply-title {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }
h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}
Thank you.
It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.
Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.
But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.
So:
Add this block:
h3.offer-title {
display: inline-block; /* this makes the bg fit the text */
float: none; /* this overrides float:left */
}
Wrap the offer-title element in another div.
Style the wrapper with
.offer-title-wrapper {
text-align: center;
}
Here is the css part:
#selectTagId{
background-color: transparent;
color: white;
background-image: url('images/img01.jpg');
background-position: right;
overflow: hidden;
}
The image path is correct. But the image isn't shown. Instead, the background is white? Ughhh how to solve this?
For me, it works with an absolute img path. See http://jsfiddle.net/9qf59/2/
Keep in Mind, that relative paths in css can lead to some odd effects. they are relative to the css file, not the document.
Did you apply this style to a div? if so, you must specify width and height of that div:
#selectTagId{
background-color: transparent;
color: white;
background-image: url('images/img01.jpg');
background-position: right;
overflow: hidden;
width: 200px;
height: 200px;
}
I have a question regarding some CSS that I'm sure has a simple solution, but just not obvious enough for me to find it yet.
I have a div defined in my HTML file with a background image, which I set in my CSS file. I then set a hover state for the div using CSS so that the background image would change on mouse over. I then placed text on top of the div in my HTML file, to make a button with text on it.
Here is where I run into my problem, however - when I mouse over the image (background image of the div), the image changes, but when my cursor hits the text on top of it, the hover state changes back to the regular one, changing the background image as well, while the text doesn't change. When I move the cursor away from the text, it changes back to the hover state.
I have the code set up in a JSFiddle at http://jsfiddle.net/Cwca22/jk7ty/ - any help would be greatly appreciated! Thanks in advance!
You can really simplify your code.
HTML
<a class="button" href="directions.html">Get Directions</a>
CSS
a.button {
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat;
color: white;
display: block;
font-family: Ovo, serif;
font-size: 18px;
height: 42px;
line-height: 42px;
text-align: center;
width: 135px;
}
a.button:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
color: #fff;
}
:hover only applies when you are hovering over that element or one of it's children. You created the button with one element, and then created the text and used CSS trickery to position it over the button. As soon as you hover over the text, the browser thinks you're no longer hovering over the button, and drops the new background.
Also, styles cascade. So in the rules for :hover, you need only specify the attributes that have changed. (In this case, background and color.)
fiddle: http://jsfiddle.net/jk7ty/10/
Move the Get Directions link inside the main div. You'll need to do some formatting for it but this should get you pretty close.
<a href="directions.html">
<div id="getDirections" class="getDirections" style="margin-top: 10px; margin-left: 131px;">
<h3 class="getDirectionsText" style="margin-left: 154px; margin-top: -28px; font-size: 14px; font-weight: 300;">Get Directions</h3>
</div>
</a>
I rewrote and simplified it for you and it works now:
Here's the link:
Get Directions
Here's the CSS:
a.getDirections {
display: block;
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat top left;
width: 135px;
height: 30px;
font-family: Ovo, serif;
font-size: 15px;
color: white;
text-align: center;
text-decoration: none;
padding: 12px 0 0 0;
}
a.getDirections:hover {
background: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button- hover.png') no-repeat top left;
}
A few things to note:
You can treat an A tag like a div if you give it a display: block; property
Since I put 12px padding on the top, I subtracted 12px from the height: property to leave only 30px (the button is actually 42px high)
I suggest reading about the "box model" (google it) to help out in future
You can also check it out on JSFiddle if you like:
http://jsfiddle.net/nerdburn/95ysC/
I would keep all of the HTML in the HTML section and the CSS in the CSS section. This just helps with keeping it all straight especially when you are testing.
This will give you a good result:
<div id="getDirections" class="getDirections"><h3 class="getDirectionsText">Get Directions</h3></div>
#getDirections {
display: table;
}
.getDirections {
background-image: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions- button.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: pointer;
}
.getDirections:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: }
a{
text-decoration:none;
}
h3 {
font-family: Ovo, serif;
font-size: 18px;
color: white;
display:table-cell;
vertical-align: middle;
text-align: center;
}
If you use this code style you can make changes to your element sizes without having to rework the centering of the text.
Am I missing something?
body {
margin: 0 auto;
padding: 0;
font-family: helvetica, sans-serif, Arial;
color: #333333;
font-size: 13px;
background: white url(images/bg.jpg) no-repeat fixed top center;
}
in SearchAndShare.css there is a body {background-attachment: inherit;} rule which, because this sheet is being called later than your main sheet, is overruling the "fixed" from your main sheet
removing that rule fixes Firefox, not sure if inherit is a valid call for a background-attachment but even if it is it would mean you would need to be setting background-attachment: fixed" on thehtmlelement so thebody` has something to inherit from
Update: Yes, if you don't want to mess with the plugin SearchAndShare.css file, adding html {background-attachment: fixed} to your main sheet also fixes it
When using the shorthand background property, the order of the properties should be
color
image
repeat
attachment
position
Try changing the style as follows (change the repeat order and add the attachment and see if it makes a difference:
background: white url(images/bg.jpg) no-repeat fixed center 0;
Then remove the background-attachment:fixed;
EDIT: Apparently mixing keywords and values will cause some browsers to choke. So centre 0 might be the issue in FF.
Try 50% 50% or center center
Try using this
background: url(under.gif) no-repeat fixed 10% 20%;
or
width: 780px;
font-family: Arial;
font-size: 0.8em;
background: url(images/bg.jpg) top left repeat-y;
border: 1px solid #e6930f
Hope this helpz...:)