• Hi,

    how to add three background images ? one should be on the top no-repeat, one at the bottom no-repeat and one in the middle repeat-y…

    if someone can tell me the method for the style.css

    Thanks a lot !

Viewing 15 replies - 1 through 15 (of 20 total)
  • I’m sorry but it is beyond the scope of these forums to deal with basic CSS issues. Try a dedicated CSS resource such as https://www.css-discuss.org/ instead.

    Thread Starter vihegay

    (@vihegay)

    Thanks esmi but you did not help me at all… and each time i try to get a help here, my question is too complicated or too easy…
    Tell me, those who start with WP, are they kicked out each time like this ?

    Your WP service should ameliorate and not degrade as at many services who are becoming too big and old…

    Thanks & regards

    This is a WordPress forum. Your question is not WordPress-specific but relates to general CSS – which is exactly the same on WordPress as it is on any static site.

    Thread Starter vihegay

    (@vihegay)

    Oh, hundreds of sorry !!! LOL

    I did not know that WordPress works with other kind of codes than CSS (or special CSS-WP codes ???)… If i have a PHP question, i guess it is forbidden here too… rediculous !

    Thanks & regards

    This reaction is classic.

    Thread Starter vihegay

    (@vihegay)

    Do you know the answer for this very simple thing, fwoan ?

    Yes, it IS possible, but it involves fairly tricky CSS — so you’d have to know CSS quite well. Basically, you divide the page into three sections (depending on the images and how you want them positioned) and set a different background for each section — when it works right, so long as the images are uniform enough at the “seams,” the “seams” are not visible. Again, depending on the images, it’s much easier to do on a fixed width site — which is then not so great for different devices.

    You could no doubt hire someone to do the custom CSS for you — or spend a lot of time learning and experimenting with it. There is TONS of info out there online about fancy CSS…

    Thread Starter vihegay

    (@vihegay)

    Thanks WPyogi, at last someone gives information and not bullshit ?? Do not worry about my CSS level, i am not so lost, i just deal with php, seo, photoshop, flash, AS2, java also in the meantime in two languages (both are not my mother tongue), i must come back regularly to a question what i did not do long ago… My site : https://www.daswingproductionz.com

    I use TwentyEleven child theme and my width is fixed to 1100 px. Body background is also fixed and i scroll the .hentry part. So, I need to devide the .hentry background but how can i do ? Like : .hentry.header, .hentry.content, .hentry.footer ? And where should i define those divisions ? Because you can not do it in a CSS…

    To satisfy esmi’s hunger, i repeat : i am talking about WP !!!!!!!!!

    Because you can not do it in a CSS

    Yes, you can!
    CSS Tutorials
    Learning CSS

    Thread Starter vihegay

    (@vihegay)

    Thanks a lot esmi, that was the second good ANSWER !!! ??

    However i know the first link, i read it regularly and you will not believe it, i was looking for the way to add 3 images as well but they do not give answer for the question, they show only 2 images as an example. I tried the method of the two images but did not work with three. That is why i came to the forum…

    Can you please show me the page of the first website where they talk about the division of a division ?

    Thread Starter vihegay

    (@vihegay)

    Esmi, is this the example ? : https://www.w3schools.com/css/css_grouping_nesting.asp – i do not understand how to use it for my case…

    This is my code for the moment :

    .hentry,
    .no-results {
    	font-family: "Electrolize", Verdana, Arial;
    	color: #000;
    	text-shadow: #fff 0 1px 1px;
    	margin: 0px;
    	margin-bottom: 80px;
    	padding: 10px;
    	position: relative;
    	background-color: #e4dbd6;
    	background-image: url("https://www.daswingproductionz.com/wp-content/themes/daswing/images/content-header.png"), url("https://www.daswingproductionz.com/wp-content/themes/daswing/images/content-repeat.jpg");
    	background-repeat: repeat-x, repeat;
    	background-position: 0px 0px, 0px 85px;
    	-moz-box-shadow: 3px 3px 4px 4px rgba(0,0,0,0.5);
    	-webkit-box-shadow: 3px 3px 4px 4px rgba(0,0,0,0.5);
    	box-shadow: 3px 3px 4px 4px rgba(0,0,0,0.5);
    	border: 0px solid #000000;
    	border-radius: 3px;
    	-moz-border-radius: 3px;
    }

    How can i devide it, like this ? :

    .hentry .header
    .hentry .footer
    .hentry .content

    Where do you want the background? It appears that you already have an image background – so what are you trying to change?

    Thread Starter vihegay

    (@vihegay)

    As i said, this is the code and situation for the moment and i try to add three images to the .hentry background instead of two.

    I also said that the first image should be on the head of the .hentry div with no-repeat, the second partie should be under the head image with repeat or repeat-y, and the third image must be at the bottom of the div with no-repeat.

    Tell me if it is not clear !

    No, .hentry is not what you need to use — as they are INSIDE other divs on the page. The current html structure of the layout will not work with what you want to do — so you’d have to recode some php AND do a bunch of CSS changes.

    The way I did it was to have a fixed height on a header and a footer section — those heights were the same height as the images for those sections. But all three sections — header, middle and footer had html structure that extended to the full width of the browser window…with internal sections inside them.

    Also, like I said, you pretty much have to have a fixed width site which yours is not. Though you could get around that if you set a background color that blends into or matches the background image when the browser window width exceeds the image width (or tile it horizontally depending on the image pattern, etc.)

    Thread Starter vihegay

    (@vihegay)

    Thanks WPyogi ! Until now we think the same thing and you understood what i want, contrary of esmi who said that i can devide a div by CSS…

    As you suggeste, i already did…

    I gave a bg colour which fits to my bg image :

    body {
    	line-height: 1;
    	padding: 0 2em;
    	background: #000000 url(images/bg.jpg) top center fixed no-repeat;
    }

    then i fixed the width of the page :

    #page {
    	margin: 2em auto;
    	max-width: 1100px;
    }

    As we agree, i must put 3 divs in the .hentry div, each for its own image… My question is, where should i define the div classes, in which php file ? You must know that the content (the articles) and title and metas should appear in the middle div.
    I use twentyeleven child theme, it is the same structure like twentyeleven.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘How to add 3 images as background’ is closed to new replies.