CSS to Display Image and Text on a Image - html

I have a header Image width of 100% and height of 120px on top of the Page.
I want to display Header text on that Header Image in the center.
I want to display another small Image on the right hand side of the header Image of 80% of the height of the header image leaving 10% on top and bottom.
I want to leave 5px on the right hand side of the small Image also. So that Small Image will look as it is on the header Image.
What is CSS to get this ?
Thanks in Advance

I'd set the image as background via CSS, then I'd position the other elements, the text you want in the center and the other small image to the right, via two separate HTML absolute positioning Divs tags. Make certain the CSS ID tag is set to relative...
<div style="width: 200px; height: 23px; position: absolute; right: 12px; top: 399px;" align="center">YOUR IMAGE OR TEXT HERE</div>
Set the parameters to your needs, of course.

Related

Problems positioning/resizing background image

I'm currently having difficulties in the header to resize/position a div with a background image.I did some google searches, but nothing really helped me..
The header has a logo, which is in a div called "header-left-section". On the top right of the logo, there is a navigation menu aligned within a div called "header-right-section". Those divs were already present in the theme.
We now wanted an image below the navigation menu and also on the right side of the logo. For that, I created a div tag "bottom-header-section" and set the image as the background image. Now I read several topics, that the background image doesnt show if there isnt a height and width set to it because therefor the div wouldnt have a size.
Now my problem is, that as soon as I make my browser window smaller, the div with the background image is set bellow the logo and menu, which I dont want at all.
This is my divs css code:
#bottom-header-section {
background-image: url('website/wertesystem/wp-content/uploads/2018/10/title-new.png');
float:left;
height: 120px;
width: 800px;
margin: inherit;
background-position: right bottom;
background-repeat: no-repeat;
}
With my understanding, now that I set the height to 120px and the width to 800px, this I set a fixed size to the div and as soon as I make the window smaller, the div keeps the same size but changes position because there isn't any more space on the same line as before right?
So what's the best way to align this div, on the right side of the logo and keep it responsive?
If you need a link to the website, please just tell me.
You can try to add something like this for the smaller breakpoint.
#bottom-header-section {
height: 65px;
width: 65%;
background-size: contain;
}
You might have to play with the height and width as it gets smaller.

Twitter BootStrap Background Image

I have a fixed nav bar at the top and a container with a full width Background spanning span12. but since the content of the background image is crucial for the layout for visual cue. i want the whole image to be displayed at all times irrespective of the window size.
Which is the best way to construct the image or set of images to achieve the same.
Large Monitor
Medium Monitor
Small Size
I have a form that will be displayed to the right of the image. Hence making it a little tricky for me to get the image working.
Link: play.mink7.com/minkstock/
If I understand correctly, you want just to have a maximum size (or percentage) that your image can reach. Try, instead of a background image, using a <img> element like so:
img{
max-width: 100%; /* or any other value */
height: auto;
}
Is there any reason you chose to set the background image using css?
If i change the #landing-page-bg div to
<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
<img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>
It produces the desired effect you want (minus some red background you set).
If you wanted to then overlay items on the image you could use relative div positioning.
Do something like background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat; for your small media query.

background image stretch and crop

So far I have managed to get the background image to stretch:
XHTML:
<div id="background">
<img src="images/background.jpg" alt="Background" />
</div>
CSS:
#background
{
width: 100%;
height: auto;
position: fixed;
left: 0px;
top: 0px;
}
#background img
{
width: 100%;
height: 100%;
}
This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).
Here is a good tutorial on creating a perfect full page background image. The same concept can be applied to any ol' div as well.
In general, images that are meant to be background images shouldn't appear in the markup itself. You're mixing presentation with content.
If having the img tag is not an absolute necessity remove it and add the following three lines in your #background class,
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
The first line sets your background for the DIV. The second line positions it to centre always. The third line makes sure the background is not repeated which is what I assumed you needed by looking at your HTML structure.
More than happy to suggest further is required.

CSS: Stretch Div to 100% of its parent's height with margin/padding

Currently I'm working on this page (look at Figure1)
I need to make shadow on the article div and I cannot use box-shadow attribute due to browser compatibility.
So we divide the background into 3 pieces like this,
<div class="article">
<div class="background-top"></div>
<div class="background-mid"></div>
<div class="background-bot"></div>
<div class="contents">
<!-- contents -->
</div>
</div>
It was nice until we change background image to PNG from JPEG which contains light-blue background-color already.
Before we change image files I could do it with z-index property. (set middle part's height to 100% and put top/bot parts on it)
However, since I change it with PNG It seems wierd because of opacity of PNG.
Bottom line is- I need to do something like this:
But when I set middle part's height to 100% with margin-top/bottom attributes,
This is what I've got(fiddle: http://jsfiddle.net/EaBxP/) :
It should work with IE6 and I cannot just use JPEG since designer wants to do stick article with comments and shade over comments box.
Thanks in advance.
EDIT: article div's height is implicit so I cannot just set middle part's height.
Make the yellow div absolutely positioned, relative to the container. By setting both the top and bottom without specifying a height, the div will get the height of the container.
div.background-mid {
position: absolute;
top: 20px;
bottom: 20px;
left: 0px;
right: 0px;
background-color: yellow;
}

CSS positioning images and text

I'm trying to get some text between two images. The images are positioned correctly, but there are some weird design issues that are cropping up.
Current Page (web page)
Design Plan (jpg)
What I'm trying to figure out is this:
Background must stop before the right edge of the right image (the girl)
Background must extend the height of the right image
Vertical bar underneath left edge of right image.
Text wrapping before vertical bar
Bars to left of bottom text in center
Any help would be appreciated!
I'd advise against splitting the image up, as Aiden suggests. This is messy and not exactly a modern way to go about it. Try something like this:
.top-pic {
float: right;
margin-top: -200px;
}
Change the margin-top assignment to however high you want the image in pixels. The only issue left is to scale the width of the top-text div to accommodate the image. One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.
This is a bit wrong
.top-pic {
position: absolute;
top: -5.7em;
right: -1.5em;
z-index: 1;
}
Cut this image into 2 images (one in the header next to the tabs, and one in the content). Stuff is floating underneath because of your z-index.
In your CSS. What you want is a pretty basic fixed 3-col layout with the text in the middle. I will point you here:
http://layouts.ironmyers.com/
http://www.csszengarden.com/
That is how CSS layouts are done.
If you move the top-pic above your logo and change the styling you can get a similar effect to what you want.
<div class="top-pic">
<img src="index2_files/girlbird.png">
</div>
<div class="logo">
<img src="index2_files/logo-center.png">
</div>
CSS Changes
.top-pic {
float: right;
position: relative;
top: -50px;
right: -25px;
}