Designing banner?

shiyuchen · Oct 10, 2017

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?

Floxera-Jose · Oct 10, 2017

envato market or creative market are both two excellent places to make a visit and choose your perfect layout.

Carlos · Oct 10, 2017

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 · Nov 10, 2017

shiyuchen said:
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

Lene · Nov 15, 2017

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?

Designing banner?

shiyuchen

Member

Floxera-Jose

Well-known member

shiyuchen

Member

Carlos

Member

JRLCentral

New member

Lene

Member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud