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).
Related
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).
Hi I would like my background image to wrap up the content/text inside it. The text seems to overflow from the background image and overlaps other text. It all works well on desktop but when I try to open Codepen in my iPhone, it didnt turn out as how it is expected to be. Please refer to pictures I attach here.
`https://codepen.io/sharonloh/full/pBrdRd`
I am new to coding and I have tried various ways after trying to search for solution but nothing seems to work.
Text overflowing from background image
From the picture you posted, there are various potential resolutions.
The first potential issue is that you have set a background image but not set other background attributes.
One way to resolve your issue would be to add a repeat to your css:
background-image: (your image);
background-repeat: repeat;
Add this to your css for the image/background class. If you only want the image to repeat vertically, you can use repeat-y instead of repeat. Similar for horizontal/repeat-x. Another way would be to use background-size:cover.
If you only want it to repeat on smaller screens you can add a media-query and add the extra attribute there.
Do add your css/html in future (now would be preferable! You can edit your question to add code). It helps to give a clearer picture of how to resolve the problem.
Hope this helps
Regarding flexslider
Is there any way to modify it from displaying images to displaying only text? Or is flexslider only for animating images? If so, can you give me a hint what would have to be changed?
Thank You
For each slide in the slideshow I would like to display varying amounts of text only. And I would like to reliably keep the slider controls responsive and in a standard position on the screen as each slide changes. I am not really concerned with displaying the images.
In some of the li examples which can be found in the zippy-share link below, I associate an image file with the "flex-caption" CSS Selector found in flexslider.css file. Using an associated image file for each text paragraph seemed like my best bet to force the slider controls to stay in that standard position as each slide changed. Am I on the right track?
I am not really concerned with displaying image files.
An html version of this problem can be found at the zippy-share link below:
http://www51.zippyshare.com/v/46072947/file.html
take a look at the li examples in the main index.html
You can replace the image with the text you want to put. Please remember to modify the minItem and maxItem to fit your need.
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've noticed that recently sites began to keep images in one big image.
For example google.com
We see a lot of little images on left side. But really is one image:
How these images are cut and shown? (firebug says that it's just element with width and height, but where X and Y position is pointed and how?)
Thanks for reply
with css background the image is moved to the right position. the other part of the image is not shown, because the element with the image as background is exactly as big as the wanted picture part.
try changing the px values in the css in the background part. you should see the image moving
<span style="background-position:-20px -132px" class="micon"></span>
here you see the background-position which is used for this image
This technology is called CSS Sprite. To reduce the http connections number needed to load multiple images. Usually this is done by designer.
This is called "CSS Sprites".
There are a lot of informations on Internet about that. In random order :
Smashing Magazine
CSS Tricks
A List Apart
And many more ...