• kalysto

    (@kalysto)


    Hello to everyone!

    I need a little help from someone who knows CSS more than me… so please help me! I will truly appreciate it!

    I have a WordPress blog, https://alchimie.spirituala.net/ and this is what I want to do:

    –> put an image background on the top, wich should cover Alchimie Spirituala banner and also the search text box;

    -> this image should fade down to the menu bar;
    -> reached the menu bar, this faded image shoud turn all white, and with the white color should go down till reached the bottom of the blog page.

    the faded image I want to use is at https://lh5.ggpht.com/_d-8zCc6oF_0/S3WI9dfCcnI/AAAAAAAADdM/piB6DBQDHNI/cea%20mai%20buna.jpg

    How is that possible to do? Plaese, please help me!
    Thank you so much, in advance!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Michael

    (@alchymyth)

    Thread Starter kalysto

    (@kalysto)

    Thank you so much, my dear friend! It was so simple…. never thought about it… but now, after editing the style.css is that the image appears like this:

    https://lh5.ggpht.com/_d-8zCc6oF_0/S3bzQmuor2I/AAAAAAAADdY/W4se8TKfHq0/s800/blog.png

    The white does not go down…..

    Why this happens?

    Thank you so so much!
    Thank you!

    Michael

    (@alchymyth)

    i didn’t know you were so quick – here second thoughts:

    edit style.css; delete the line with #background; and add the new style:

    #page { /*the main container*/
    	width:880px;
    	margin:0 auto;
    	font-size:1em;
    	background:#FFF;
    	padding: 10px 25px 35px 25px;
    	border:3px double #333;
    	}
    
    #page div.clearfloat {
    height:180px;
    background: url(https://lh5.ggpht.com/_d-8zCc6oF_0/S3WI9dfCcnI/AAAAAAAADdM/piB6DBQDHNI/cea%20mai%20buna.jpg) no-repeat;
    	}

    Thread Starter kalysto

    (@kalysto)

    Now I`ll do it and I will tell you in a couple of minutes!
    thank you so much!

    Thread Starter kalysto

    (@kalysto)

    thank you so much, for all your help!!!
    Now it works, not perfectly but it works and this is what I wanted…

    Now I need to fix the only one problem… this image header with the sunrise appears also down, on a post:

    I will manage somehow to remove it because messes up the posts…

    Again, thank you so much for all your help, you saved me!
    Thanks ??

    Thread Starter kalysto

    (@kalysto)

    Michael

    (@alchymyth)

    i actually did not scroll down the page to see if anything wlse got changed.
    it can be difficult to test the whole influence of any changes to the style.css, as i am working in firefox with the developer addon. it is a great tool, however i can only work on one page at the time, and all changes need to be repeated when i change the page.

    i tried to find a remedy to get rid of the sunset in the post:

    try and add this line just after the other one – the beginning looks very similar, however it is different:

    #page div .clearfloat { height:auto; background:transparent; }

    Thread Starter kalysto

    (@kalysto)

    I dont know how do you do it... but now its perfect!!!
    So, the right code that worked for me is:

    #page { /*the main container*/
    	width:880px;
    	margin:0 auto;
    	font-size:1em;
    	background:#FFF;
    	padding: 10px 25px 35px 25px;
    	border:3px double #333;
    	}
    
    #page div.clearfloat {
    height:180px;
    background: url(https://lh5.ggpht.com/_d-8zCc6oF_0/S3WI9dfCcnI/AAAAAAAADdM/piB6DBQDHNI/cea%20mai%20buna.jpg) no-repeat;
    	}
    #page div .clearfloat { height:auto; background:transparent; }

    Thank you so so much, again!!!
    This is how is displayed now:
    https://lh6.ggpht.com/_d-8zCc6oF_0/S3b87YZ6YXI/AAAAAAAADdg/djc7dB-mDqg/Screenshot-1.png

    What is the developer tool, by the way… I do not know css… but… maybe could help me… thank you!

    Michael

    (@alchymyth)

    it is the ‘web developer’ add-on for the firefox browser – free to download and easy to install.
    unfortunately you still need to know your css, it just helps to quickly test educated guesses, and to find the styles that influence certain parts of the page.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Faded image header/background’ is closed to new replies.