EDIT: Answer found here CSS <hr> right aligned next to text thanks to Mr. Alien
I am trying to make a header title which looks like the following
Title -------------------------------------------------
I have an image which I am planning to use as the background for it.
But when I add it I am unsure how to position it so it doesn't overlap with the text as it does right now.
It looks like as follows
-T-i-t-l-e---------------------------------------
HTML
<div class="content-header"><p>Check Out</p></div>
CSS/LESS
.content-header {
width: 90%;
background: url(../images/bulletbg.png) repeat-x center;
margin-top: 10px;
p {
margin: 0;
padding: 0;
}
}
The bottom line is this, you should have a title
<h1 style="width: auto">your title</h1><div class="yourbackgroundimage"></div>
this way you will not have your title being overrun.
Try placing your title and the background in separate divs, then style the divs with "display:inline" or "display:inline-block" - depending on exactly how you want it to behave.
Try the background-position property.
background-position: 100px center;
MDN Background-position
Try using background-position. By default a background will start from the top left but using this will allow you to change the starting position. You could use it in a number of ways
background-position: 20% 0;
Or
background-position: 10px 0;
Play around with it to get it right
Related
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
Good afternoon stackoverflow community,
I have a file with some images inside it, and I want to use each part of this image separately without creating different files. So I started to look for ways to give position through CSS to "chop" the piece that I want to show.
I tried using properties like clipwithout success. The closest I got was giving a height and background-position when inserting some random text inside the DIV.
Here's a fiddle I did to demonstrate it, but since I couldn't update a image to it I just made with background-color.
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
}
http://jsfiddle.net/PatrickBDC/HaGNa/
Is there a way to show that background, the same exact size but without the text?
Thank you very much!
You need to have a width for your div as well if the div is empty. try something like this
.icon {
float: left;
background: url () no-repeat 0 0;
height: 29.2px;
width:60px;
}
If you would like your div to display without content, you need to specify width in your CSS:
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
width: 50px;
}
Here is a working fiddle.
Just add width: 100px; and height: 50px;property in your code. You can add width and height as per the part of the image which you want to show.
I was experimenting with text scrolling over a limited fixed background image (not sure what it's called exactly - where it's like parallax scrolling but the background image doesn't move at all?) and everything's fine except that I'm getting a small (5-10px) margin or padding between the bottom of the "upper" image and the bottom of the background image.
The bottom margin and bottom padding are both set to 0px (I've also tried it at 0%, with no improvement). I've also tried both negative margins and negative padding, neither of which had any effect either.
I tried a simple CSS reset, which solved a separate issue with unwanted side margins, but this problem persists. (And it's the same in every browser.)
I'm sure I'm missing something very simple, but I haven't found an answer for this exact problem. Any insight is greatly appreciated.
*
{
margin: 0px;
padding: 0px;
}
#text_and_image
{
text-align: center;
font-family: 'Montserrat Subrayada', sans-serif;
background: url(/images/fountain.png);
background-attachment: fixed;
background-size: 100%;
padding-top: 25%;
padding-bottom: 0px;
margin-bottom: 0px;
background-repeat: no-repeat;
}
The HTML:
<div id="text_and_image">
<p>this is the third one<br>it has both TEXT<br>and an IMAGE</p>
<img src="/images/bird_palm.png">
</div>
It is hard to tell without your image dimensions but I imagine the background image is being contracted or expanded due to the background-size: 100%; in the css. Set both of the images to the same width and see if the problem persists.
Okay, I've been trying to solve this question for years. I've tried a number of different solutions, but finding myself facing the same problem again, I'd really like to ask the community for the best way to solve this problem.
I want to have two images on the background of my page: 1 as an xy-tiled "texture", and another image which will hug the very bottom right of the entire page, regardless of the page height. So, the page will look like this:
This was accomplished not through a background img() in my CSS, but with an image near the footer, like so:
<style>
.specialImage{
position: absolute;
bottom:0;
right:0;
z-index:-99; /* or higher/lower depending on other elements */
}
</style>
<img src="/static/assets/img/stain.png" class="specialImage" />
The problem with this is that if the page is longer than the screen, this happens:
No good. Changing position to 'fixed' cause it to have a 'sticky' effect, which I don't want. So this avenue is a no-go.
Route 2: the CSS background solution. Unfortunately, this code doesn't work:
body {
color: #333333;
background:
url("/static/assets/img/fabric_1.png"),
url("/static/assets/img/stain.png");
background-repeat: repeat,
no-repeat;
background-position: 0 0,
right bottom;
}
So, I tried this:
html{
background:
url("/static/assets/img/fabric_1.png");
background-repeat: repeat;
background-position: 0 0;
}
body {
background:
url("/static/assets/img/stain.png");
background-repeat:
no-repeat;
background-position:
right bottom;
}
Which, for the long page, works! Hooray! But, when I go back to the short page, now it looks like this:
Sonofabitch!
So what's the solution here? Sticky footers? Min-heights? Wrappers? None of the solutions I've tried so far produce the desired behaviour in both situations.
StackOverflow elders, what should I do?
Thanks!,
R
As I understand you want to stick background image to bottom and right?
so solution is:
body { background: url("/static/assets/img/stain.png") right bottom no-repeat; }
Hmm, with css3 you can use multiple backgrounds. Can you try this?
html{
background: url("/static/assets/img/fabric_1.png"), url("/static/assets/img/stain.png");
background-repeat: repeat, no-repeat;
background-position: 0 0, right bottom;
}
body {
color: #333333;
}
Running into the same issue, my solution involves setting the html element to have a min-height of 100% with a height of auto:
body, html {
width:100%;
height:auto;
min-height:100%;
margin: 0px;
padding: 0px;
}
body {
background-image: url(../images/bkgrnd-footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}
Shorter pages are forced to the viewing window height and longer pages picks up the auto height.
You could always set the height of body to 100% then it should work.
To clarify: Then you can have a background image in the html element and in the body element, pretty much as you've allready tried:
html {
height: 100%;
background: url(html.png) bottom right no-repeat;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
height: 100%;
background: url(body.png) bottom right no-repeat;
}
Just tested a bit more, and it seems it doesn't work in IE10's Internet Explorer 5 quirks mode, but i really hope that isn't a dealbreaker for youl, because you don't seem to be working with a strange legacy product.
The purple square is the html-background-image and the reddish is the body-background-image.
Thank you for posting. I was having the same problem. I resolved it by adding the background image to a container div for my content set at 100% width. The container closes before my footer, but you could probably try putting it outside the footer also if you need your image to go to the bottom of the page. I only wanted mine to go to the bottom right of my content.
Here's my div structure:
<html> Background image
<body> Padding
<div id="outerWrapper"> Background applied outside content
<div id="borderWrapper"> Contains content
<div id="contentWrap"> Sets up container positioning for child elements
I would do the following:
I have a background image (top center) and I would fill its middle-bottom with content. I would do something like http://glocalventures.org/ . Note: it's resizable!
How can I make something like this? I use Zurb Foundation as CSS Framework.
Thanks!
I am not really sure what you are asking here. I am assuming you are talking about making a background-image similar to this site?
To control your background-image / background position via CSS. You can do something like this:
body {
background-image:url(../images/bg.jpg);
background-position: top center ;
background-repeat:none;
}
or you can use pixels
body {
background-image:url(../images/bg.jpg);
background-position: 100px 100px ;
background-repeat:none;
}
or if you want percentages
body {
background-image:url(../images/bg.jpg);
background-position: 50% 50%;
background-repeat:none;
}
to make it resizable you can use this CSS property:
background-size:100% 100%;
*Note This is a CSS3 property and will not work in some older browsers.
If this isn't what you are looking for. You can right click on their site view their CSS via source code and see how they are doing it.
Set the image to top, centre:
yourImage{
background: #ffffff url(../images/bg.jpg) top center no-repeat;
}
Set where the text goes:
yourText{
position: absolute;
bottom: 5px;
text-align: center;
}
and the HTML code for this:
<div id="yourImage">
<p id="yourText">some text...</p>
</div>