So the banner I made at the top of the page is too short horizontally.
I already tried adding "width: 200%;" to the CSS but it only made the space around the image bigger, not the image itself. Please help.
The banner is the giant purple one at the top of this page:
http://www.neopets.com/~ellenore
p.s. please don't make fun of my love for neopets. xD
}
h1 { .left
width: 200px;
margin-left:0px;
margin-right: 0px;
margin: -8;
letter-spacing: -1px;
}
<h1>
<img src="image is here">
</h1>
If you change your H1 tag to:
<h1 style="
width:100%;
height:288px;
background-image: url('http://i60.tinypic.com/rse735.png');
display: inline-block;">
</h1>
Then your image will automatically repeat. However, as it stands your image doesn't repeat too well. So, you'll probably want to edit in your photo editing s/w.
I'd recommend not stretching your image as it won't look very good.
Also, you may want to create your "Shaggy Little Lion" text as a separate graphic which can be centered on top of the image below.
Related
I'm trying to do this for my twitch, I have an image 1600x400 or something like that, it's background of my alert, so if the length of nickname changes, the background width changes relatively, but what I'm trying to do is cut image horizontally if text length changes
something like this
Without knowing much about the details of your code, this is what I can provide:
You can attempt to set the css as such:
#element{
background-image: url('your/image/url.jpg');
background-position:center;
background-size:cover;
}
JS Fiddle: https://jsfiddle.net/1k4aqz13/
Please reply with more detail so we can better answer your question.
You can achieve this with setting the background-image set to image along with background-repeat:no-repeat; and most importantly set the display to either inline-table or inline-block so that the element wraps around it's inner content.
Here is a sample code.
#container{
width: 100%;
}
.textContainer{
background-image:url('http://placehold.it/350x100');
height: 100px;
background-repeat:no-repeat;
display: inline-block;
line-height: 30px;
padding: 0 5px;
/*Uncomment below if you want the image to stretch only when text in div goes beyond the image width-wise.*/
/*background-size:cover;*/
}
<div id="container">
<div class="textContainer">
This is some test text here.
</div>
<br><br>
<div class="textContainer">
This is some test text here too to check.
</div>
</div>
Hope this helps.
I am fairly new to coding and I can't seem to figure this one out... I've included an image that I am trying to replicate just for practice. I can't figure out how to float the image next to the title AND center that title vertically. Then I also need to align the text underneath the title.
This is how I've built the HTML for one of the blocks
<article>
<header>
<img src="#" alt="#" rel="#" />
<h1>This is the header</h1>
</header>
<p>
this is a paragraph full of text that needs to be aligned underneath the title.
</p>
<footer>
Read more, aligned underneath paragraph
</footer>
</article>
And then as far as the CSS goes, I can't figure it out. I am trying to float the image to the left, then clear the float in the p and footer and set a left margin to align it under the title. This works, but then I can't figure out how to vertically center the h1 with the img.
I hope this makes sense. Again, I'm new so I expect most of my stuff to be wrong but I am eager to learn so I am asking!
EDIT: I am not asking anyone to write the code for me. Rather, I want to know if my thinking about the float and margin was right... Everything worked except for the vertical alignment of h1...
The trick to aligning the image and the h1 is to make theminline-block and then vertical-align:middle. No magic numbers required.
article header img,
article header h1 {
display:inline-block;
vertical-align:middle;
}
Codepen Example
I'm in a good mood. Here's an example how you can solve this. There are various possibilities. This is just one of them:
CSS
article {
position: relative;
float: left;
width: 200px;
padding: 0 0 0 60px;
}
article:before {
content: url(http://placehold.it/50x50);
position: absolute;
top: 0;
left: 0px;
width: 50px;
height: 50px;
}
Demo
Try before buy
I have an image that should be positioned near the bottom of the screen. I have a main image that is the background image and will resize with the browser size. I need the image over the background image to be 20-30px from the bottom no matter what size screen or if the screen is resized. (Image also must be centered.)
I am not sure how to go about doing this. What is the best way to do this?
Here is the code I have tried:
.bottom{
position:absolute;
margin-left: -355px; /* Image is 710 in width */
left:50%;
bottom:-20px;
}
That code has the image centered on the page properly but not 20px from the bottom. Also I have content below the image and I want the content to stay below the image but it currently comes up over the image.
HTML:
<img class="bottom" src="src-path.png" alt="Text" />
<p style="clear:both;"> </p>
<!-- More Content here that consist of img and p tags. -->
I guess to position the image 20-30 px from the bottom you can use css property
margin-bottom:30px; or 20px what ever value suits you.
for aligning at the center use vertical-align:middle Please do share the code that the thing is more clear. Hope I answered it correctly.
CSS Together must look like:-
margin-bottom:30px;
vertical-align:middle;
You better use a CSS file, in which you declare a footer to be at the bottom of your page. Then put your image in your page, with class of that CSS and id of "footer". Clear enough?
Here is the way I finally did this:
CSS:
.image_block {
/* Size of image is where the width/height come from */
width: 710px;
height: 500px;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/*Nothing Specified */
}
HTML:
<div class="image_block">
<img src="src.png" alt="Alt Text" />
</div>
I have a problem. The designer I hired did not separate out the logo and the header and its to late to get it done from him.
so I have a header image which has the sites logo in it. I want to make this logo clickable. You can see the site here: http://www.stopsweats.org/
The code for the logo tag is:
<div id="header">
<p id="logo">
</p>
Here is the CSS, added as per comments
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads
/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
padding-top: 2em;
z-index: -1;
}
So how can I make this into a valid link.?
I don't want to add any visible text as it will look ugly.
I will change the #logo width and height and placement as an overlay on the image. Hope fully that should be ok among all browsers.
The easiest thing to do is make the a take up some space. It's already properly positioned, so there's only a little bit to do.
Remove these css width and height properties:
#logo a {
width:1px;
height:1px;
}
Then add a little text to the a:
StopSweats
The text won't be displayed because you have text-indent: -9999px applied to that a, but the block will be about the right width and height to cover the banner image area.
Write like this:
HTML:
<div id="header">
</div>
CSS:
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
z-index: -1;
width:1000px;
padding-top:10px;
}
#logo{
display:block;
width:245px;
height:60px;
margin-left:90px;
}
http://jsfiddle.net/rEFRw/
Esiaest way to do according to your structure I would prefer to put your logo image directly into your html instead of background-image through css. If you would like to do than only need to add image tag between your anchor tag (....) just change your css and html according to below code..
CSS
#header {
border-color: transparent;
height: 108px; /* change according your logo image height */
padding-top: 2em;
z-index: -1;
}
HTML
<div id="header">
<p id="logo">
<img src="http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg" alt="logo" title="go back to home" width="logo width here" height="logo height here" />
</p>
</div>
Check your logo image url properly and make sure you endup your header div tag where it is in your current html file.
Also if your #logo id has width and height value set than change accordingly.
#logo a{display:block; height:XXpx; width:XXpx; text-indent:-999px;}
you may have to adjust some css of other tags also. but it will work
HTML:
<br />
<div class="UpperTitle">
<img src="Images/CableSolve Logo.jpg" align="absmiddle" padding-right: 10px;" /> CableSolve Web Dashboard - Version 0.1.1
</div>
<br />
CSS:
.UpperTitle
{
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
background-color: #CEDEF4;
font-weight:bold;
color: #224499;
border-radius: 10px;
}
I have this setup currently. I would like to position the banner on the same level as the text, but I would like to have the banner on the left-hand side of the screen with the text in the center of the screen.
It seems like my only options are either: floating the image (would need a ton of hard-coded values to make this look OK), wrapping the text in a <div> to center it specifically (which causes it to drop below the image), or centering both the image and the text -- which is what I do currently.
I found a lot of various guides on this, but they seem to either float the image using a simple website layout, or vertically align the text, or find the center banner/text combo acceptable.
Thoughts?
Thanks in advance.
Why not just exploit CSS position? like this.
Cheers
put the text in a div and add:
height: /*height of parent*/
line-height: /*height of parent*/