Designing banner?

shiyuchen

Member
Registered
Joined
Oct 6, 2017
Messages
46
Points
0
I would always love to add pictures as a background, but it always makes the word hard to read. Do you guys have any template for backgrounds that are usually simple yet attractive?
 

Carlos

Member
Registered
Joined
Sep 30, 2017
Messages
38
Points
0
For the text to be readable when your site has an image background you can fill your text div with a solid color to be easily distinguished.
 

JRLCentral

New member
Registered
Joined
Nov 5, 2017
Messages
8
Points
0
I would always love to add pictures as a background, but it always makes the word hard to read. Do you guys have any template for backgrounds that are usually simple yet attractive?
This is a common problem in using an image as a background, specially if the image itself contains contrasting colors. It would make some of the text difficult to read. I have a couple of tips to solve this.
1. Make sure the image does not have so much contrasting colors and use contrasting color on your text (dark background image and light text colors, or vice versa).

2. For your text container use a layer or div with transparent background color. You need to use CSS to do this. In one of my blogspot page, I used an image with generally dark colors, but there are some parts with bright colors (see screen shot).

The text container has a dark background color with whit text. Your CSS code might look something like this.

<style type="text/css">
{
/*your background image*/
div.background {
background: url(mybackground.jpg) no-repeat;

}

/*the transparent box with dark color */
div.transbox {
margin: 30px;
background-color: #333;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
/*make sure your text in each paragraph is white */
div.transbox p {
margin: 5%;
color: #fff;
}
</style>
I hope this helps.

Image: Screen shot of Roxas-Aikido.blogspot.com

Screenshot_2017-11-10-07-35-12.png
 

Lene

Member
Registered
Joined
Nov 14, 2017
Messages
36
Points
8
You can adjust the opacity of your background photo, try it. And use a strong color of your font text, or try to insert 'stroke' in the blending options. By the way, what design tool do you use?
 
Older Threads
Newer Threads
Recommended Threads
Replies
3
Views
2,214
Replies
11
Views
3,378
Replies
16
Views
5,102
Replies
6
Views
2,758

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top