Creating background color or images for pages under CSS
-
Hi Friends , I wanted to add different background colors or images in each of my pages and write content text over it. How I can do that in CSS. Please guide step bt step.
Many thanks
Raj
The blog I need help with is: (visible only to logged in users)
-
Hi Raj, each page in your site has a unique CSS class in the opening body HTML tag. You can use that to target individual pages with CSS changes. In the following example, I’ve used that unique CSS class to target your Btgraj Art page and turn the background an obnoxious green as a demonstration. You can of course edit my color. I’d suggest keeping with a color rather than an image since images typically have varying colors and it is difficult to find a text color that will be readable typically.
body.page-id-68440 { background-color: #00dd00; }You can use the above as a guide for creating CSS rules for your other pages. If you have problems, please let me know.
I used the web inspector in my browser and looked in the HTML side of things to find the opening body HTML tag and the unique page CSS class.
-
Hi firstly let me tell you a big thank you for your proper guidance and help. I have done it accordingly in some pages it looks now so nice but I also have done it with some background images in few pages.
For which I need some help and guidance.1) To add an Image as a background in any given page to type a text content over it ; what is the actual size of image required ( length and width )in mm/inches etc.
2) I have added some background images in some of the pages but it gives a double or triple effect (Visit this on any pc https://betterthangoodlife.com/30-a-b-c-goal-card/) on entire corner of the screen of a pc. And some images are not reflect at all on mobile ( Visit this on mobile as well as laptop https://betterthangoodlife.com/affirmation-for-the-month/)
What is the solution ? Please help!
Raj -
Great job Raj!
1) To add an Image as a background in any given page to type a text content over it ; what is the actual size of image required ( length and width )in mm/inches etc.
That is a good question, and one without a real answer. In general, I would suggest something about the size of what you are using. The problem comes in getting them to size as screen/window width changes. We can use background-size: contain; or background-size: 100% auto;, but that works at some widths, but not others, such as on phones.
.page-id-68697 { background-image: url("https://betterthangoodlifedotcom.files.wordpress.com/2016/11/background-image-page-btgl-4.png") !important; background-repeat: no-repeat; background-position: center top; }2) I have added some background images in some of the pages but it gives a double or triple effect (Visit this on any pc https://betterthangoodlife.com/30-a-b-c-goal-card/) on entire corner of the screen of a pc. And some images are not reflect at all on mobile ( Visit this on mobile as well as laptop https://betterthangoodlife.com/affirmation-for-the-month/)
Background image positioning can be a challenge with the nature of your images. You may want to give the following a try. Notice I used a 250px value instead of top in the background position declaration and also added a background size of contain which should help out on the mobile.
.page-id-68798 { background-image: url("https://betterthangoodlifedotcom.files.wordpress.com/2016/11/background-image-page-btgl-71.png") !important; background-repeat: no-repeat; background-position: center 250px; background-size: contain; }Also notice the background-repeat: no-repeat; which will take care of the images repeating.
Let me know what you think. We can use Media Queries to make changes for only certain width screens, but that can get a bit tricky and sometimes quite involved.
-
Wow!!! That’s truly an educational guidance and a proper answer to both of my earlier questions. I have applied these suggested rules on my CSS customizer for many pages which having background images and I am so happy to say that both the issue are resolved. A big..big thank you once again!!
I have another two questions of which I am looking an answer that are again connected to CSS.
1) I want to change the looks (color) of my Contact form which I have added at bottom of all the 5 child pages under main page i.e. Free Gift.(https://betterthangoodlife.com/30-a-b-c-goal-card/)+other 4.
So I want to change the color (by default it is white) of box ( Name, Last Name, Email and Submit) in which visitors fills their details and submit.
2) Secondly I want to add a very small logo of CPI (Creative Progenitor Institute) at the top right side corner, close to Search box on orange sunrise background color of website were Creative Progenitor Institute is written and all the Menu pages are displayed.
Please help and guide!
Raj -
Hi
Just to inform you that my first issue i.e. [ I want to change the looks (color) of my Contact form which I have added at bottom of all the 5 child pages under main page i.e. Free Gift.(https://betterthangoodlife.com/30-a-b-c-goal-card/)+other 4. So I want to change the color (by default it is white) of box ( Name, Last Name, Email and Submit) in which visitors fills their details and submit.] is resolved.
Now looking forward to resolve the second one.
Please give solution.Many thanks!
Kind regards
Raj -
Hi there,
I am seeking solution for another issue i.e. I want to reduce the width of SUBMIT Box (Green Color) in contact form and I want it to equal the width of Name and Email ( Orange color) in contact form. So that all three comes in same width.
https://betterthangoodlife.com/30-a-b-c-goal-card/
Please help and guide.
Kind regards
Raj -
Hi, for the logo in the header area, I looked in your media library and I’m not sure which image you wish to use, or if you have actually uploaded it yet. I’ve randomly chosen one of the images (with scrollwork to the left and right) and used that for the code below. I’ve done this using a Media Query and limited it to 700px and wider screens because on screens/windows narrower than that, the logo will overlay the title and tagline.
hgroup { background-image: url("https://betterthangoodlifedotcom.files.wordpress.com/2016/09/about-page-images-btgl-1a.png"); background-size: contain; background-repeat: no-repeat; background-position: right top; }Add the above to your custom CSS and if you have a different image to use, upload that and replace the URL between the quote marks in the background-image declaration with the URL of your image.
Let me know if you have any problems or any further questions.
-
Hi
Thank you so much for your valuable inputs. As you suggest I have uploaded CPI logo on top right side of header. It looks really very nice when I see on my PC but when I open my website by using my android phone then this logo is getting mixup (mess) with header heading i.e. Creative Progenitor Institute and it doesn’t look appropriate. I don’t know why? Please guide!
Another thing; I want to add a few very small social media icon (Instagram, Facebook, Twitter and LinkedIn) on the header just below CPI logo parallel to menu pages line. The objective of adding these icon on header is to get attract and get people connect with us on through these social media which is ultimately connected to their URL.
Kind regards
Raj -
Hi, on the logo thing, add this to the bottom of your custom CSS and see what you think. It centers the logo above the title on smaller screens.
@media screen and (max-width: 660px) { hgroup { background-position: center 15px; background-size: auto 70px; } #site-title a, #site-description { text-align: center; float: none !important; } #site-title { padding-top: 80px; } } @media screen and (max-width: 560px) { #site-title { padding-top: 90px; } } @media screen and (max-width: 480px) { hgroup { background-position: center 60px } #site-title { padding-top: 130px; } } -
On the social icons, Mixfolio does not have a social menu, but you can add your social networks to your custom menu and then add images to them with CSS. If you wish, you can add those to your custom menu and find and upload some icons to use and I would be happy to help with the CSS.
-
Hi Thanks a ton. As you suggest I have added it on CSS and it looks really very nice on mobile.
About social icons; I didn’t understand it. Can you please give any example of how to do that. Do I have to create it in widgets as a side bar? That I have already done it on home page. Actually I wanted that icon on header top right side but if it is not possible in Mixfolio than I have to give up.
Many thanks Sir!!
Raj -
Glad the CSS did the trick for you.
On the social icons, you will want to add a Custom Link to your Custom Menu for each of the services you want. Once you do that, we can then add icons or images using CSS.
-
Hi dear,
Once again many thanks! As per your instruction I have added a custom link of social sites ( Facebook, Twitter and YouTube ) to my custom menu (https://betterthangoodlife.com/). So now how to add their respective social icon or images by replacing words using CSS.
Kind regards
Raj -
Great. I don’t see any social icons uploaded to your media library. If you can find the ones you want and upload them we can then add them to your social menu items. If you want to give this a go, here is the basic CSS and you can replace URL_OF_IMAGE between the quote marks in the background image declaration with the URL of your chosen images.
/*facebook*/ #menu-item-69520 { background: url("URL_OF_IMAGE") no-repeat scroll center center / contain transparent; } #menu-item-69520 a { text-indent: -9999px; } /*twitter*/ #menu-item-69525 { background: url("URL_OF_IMAGE") no-repeat scroll center center / contain transparent; } #menu-item-69525 a { text-indent: -9999px; } /*youtube*/ #menu-item-69526 { background: url("URL_OF_IMAGE") no-repeat scroll center center / contain transparent; } #menu-item-69526 a { text-indent: -9999px; } -
If some one would helps me a little with color adjustment on my website
any advice is more than welcome.
-
Hi @stanodavacrs, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org Themes and Templates forum.
For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.
-
Hi Dear,
With reference to adding CSS rules for social icon on header I would like to inform you that; I did it as per your given instruction in your last reply to my query. Once again thank you so much. In addition to that I have also added an Instagram Icon next to YouTube.I wanted to replace orange color background header with an image; I have added six header Images in media library and another question ; Is it possible that for each menu (Home, About, Blog, Event, Free tools, Seminar, Btgart) I have a different header image?
Kind regards
Raj -
Your social icons look great, but I would suggest adding a bit of spacing between them. Add the following to the CSS rules for the social icons that have the URL of the images in them.
margin-right: 5px;To add different header images to each of your pages, you will need to use the unique page id CSS class set in the opening body HTML tag for each of the pages. This would be the basics for the home page. I grabbed a random image URL from your media library.
.page-id-68404 #branding-inner { background: url("https://betterthangoodlifedotcom.files.wordpress.com/2016/11/colors-1512911.png") no-repeat scroll top center / 100% auto; }Use the web inspector in your browser to find the unique CSS class. The opening body HTML tag will look something like this.
<body class="home page page-id-68404 page-template... -
Hi Richard,
Once again thank you so much. As you suggest I have added (margin-right: 5px;) for creating a space between each social icon; this affects increase in size of social icon and not the space between them. These icons are still joint each other.Secondly I have also added CSS rules for different header Images for each main menu pages( Btgraj Art, Seminars, Free Tools, Events, About and home). It looks very nice when I see on my PC but these header images are not fully displayed on PC.
Also when I open my website by using android phone then this header images are not displaying in full and the site title and menus not coming under these header images hence it doesn’t look appropriate and menus and site title are unreadable because of its white color without header image. I don’t know why? Please guide!
kind regards
Raj
- The topic ‘Creating background color or images for pages under CSS’ is closed to new replies.
WordPress.com Forums 