I am having frustrations over background image, and thus stuck.
How to put different background images into 2 or more different sections of the webpage? Will putting the background image in the body in my html file be applied to the whole webpage? Or should I insert the background image respectively inside the selected container? Please try to be direct and simple as possible using examples if you can, please.
I tried to put the background in its container but when I see at other exemples I notice most of people put a 1st background in the body and then later in the code inside a container put 2nd background but that confuses me. Does that mean that the 2nd or the 3rd background inside their own respective containers overflow the 1st background set in the body (because I understand an image put in the body is for the whole webpage and thus all sections).
Related
Using css3/html5 only, I am trying to have separate and distinct background images line up side by side, not overlaying each other.
In essence I would love to get multiple separate and distinct background images to behave exactly how the tiling of a single background image behaves.
I also would like to achieve this without setting any fixed or specific positions, simply each background image dropped in respects the size of the background image next to it, butts up against it, and so on and so on.
So background images tiling across an element/container as normal, except each individual background image in the tiling can be unique.
Any ideas?
Here is how I understand your question:
I have a few image files
I want to display them side by side
I have one div and I do not want to (or can not) change the HTML I have
" Using CSS3, can
I display those images side by side as backgrounds of my div?"
If this is your question, the answer is no, not as of now. Sorry.
According to this standard specification,
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4
there is no position value to place background images "after previous" or "floating".
More info on multiple backgrounds and background sizing:
http://www.css3.info/preview/multiple-backgrounds/
https://css-tricks.com/almanac/properties/b/background-size/
You will probably want to look into positionning your gallery, a div containing your img elements as absolute. If you place it before your div, it will appear behind the div and make one img element per image file.
<div style="position:absolute;">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
<div>the div to be backgrounded</div>
foreach img that you want to use in your "background", create a div, and then use the css background-image property to display the image within the borders of the div. in other words, don't put the img tags in the html, link to their source in your css.
without positioning, you will be limited to adding any "foreground" content to the divs with the background images
based on the way you worded your question, this might end up being very time consuming and frustrating for you. maybe consider a different technique with code you can understand? if you start with the basics and learn them thoroughly, the creative techniques will reveal themselves
I'm trying to create a header for my website but I'm having a bit of difficulty as I'm new to HTML and CSS. I want to create a banner with the same font and background as shown below. They consist of a certain colour with a pattern overlay at 44% opacity, which I'm not sure how to do.
I originally uploaded the header as an image, but I was told it's bad to use large images on websites as it make it longer to load. So I tried creating it via code. If anybody could please help replicate the header below, I'd greatly appreciate it. Thanks.
Link to my current HTML & CSS Code via Fiddle
Link to Banner I want to replicate
Here you have your fiddle updated: FIDDLE
I've fixed a few things in the html like tags not closed (your headers) and now the "container" contains the banner propely.
So now you just have to add a background image with the pattern you want and (as you did) play with the opacity value of your text.
#container {
background-image:url(http://zimasolutions.com/Images/pattern.png);
repeat:repeat;
}
Use the repeat option for the background image so you just need a little image.
I uploaded temporally the image pattern.png I have used as an example. I took the sample for the image you linked. In a few hours I may delete that image.
Edited: IF you want the pattern image OVER the text insteed of under it may be more complicated. You could absolute position a container over the banner but in this case you may need to change the image opacity with an image editor (like photoshop).
How can I make all my pages have the same background feeling as my homepage. For example if you see this page you can see the background is out of place. Let me know if you want me to send you the code but pretty much you can see it at these pages. Thanks a lot!
PS: Any other way besides using position fixed?
Try a different approach... Instead of using 2 different gradients in two different div's (#hhbg and #footer), just combine the two gradients into one image and apply it as a background to, for example, body. Then use background-position to anchor the image to the bottom corner and repeat it horizontally.
I'm working on my first website and I've stumbled across a problem.
How do i make my main contentBox cover the subNav? Img Here
You can set the z-index property.
To get an image over another image:
Using CSS, absolutely position your image and set the top value to 0 for both images.
However, I am not sure you are asking the correct question as in your image, your content areas seem to be above the area you want them to be placed.
Also - are your web page areas all images?
I'm sending some HTML formatted mails where I'm showing property images with their current statuses. There are some triangular status images overlapping to main property images which are getting distorted as MARGIN style property is not allowed in Gmail. Style properties like PADDING and POSITION are also not working. This mail is formatted in table based HTML.
I just want to place status tag images on to right bottom corner of the property images. Kindly help with some alternate solutions.
You can't overlap foreground images, and you can't use multiple background images.
What you can do is use background images, with foreground images overlapping them.
The other alternative is to use one image, and replace the image on the back end as the status changes. If this happens a lot, you could generate them dynamically.