How to insert images into corners of the site?

  • I am a newbie to wordpress and know very little about coding etc but have been designing my site through trial and error and from searching this forum for advice. However there are a couple of things I am struggling to do which I could do with some help with.

    I am trying to add some corner swirls into each of the far corners of the site (I have 4 separate png images that have been designed for this).

    https://www.beauty-deals.co.uk/wp-content/uploads/2013/08/swirl4.png

    I have tried a couple of things, (with links to the images I have uploaded to media), but they didn’t really work

    ie

    #upper_left {
width: 125px; height: 125px;
position: absolute;
top: 0; left: 0;
background-image: url("https://www.beauty-deals.co.uk/wp-content/uploads/2013/08/swirl2.png");
background-repeat: no-repeat;
}

#upper_right {
width: 125px; height: 125px;
position: absolute;
top: 0;
right: 0%;
background-image: url("https://www.beauty-deals.co.uk/wp-content/uploads/2013/08/swirl2.png");
background-repeat: no-repeat;
}

#lower_left {
width: 125px; height: 125px;
position: absolute;
bottom: 0%; left: 0;
background-image: url("https://www.beauty-deals.co.uk/wp-content/uploads/2013/08/swirl4.png");
background-repeat: no-repeat;
}

#lower_right {
width: 125px; height: 125px;
bottom: 0%;
right: 0%;
position: absolute;
background-image: url("https://www.beauty-deals.co.uk/wp-content/uploads/2013/08/swirl3.png");
background-repeat: no-repeat;

    Here’ s my sites url https://www.beauty-deals.co.uk/

    Any suggestions as to what codes I need to do this? As I’m a beginner to wordpress can you please tell me exactly where on the CSS I need to put the coding. I don’t really understand about child themes etc and I have just been going to editor and changing the coding there (which I’m sure is probably not the right thing to do!!).

    I have tried the above coding under

    }
    body{

    and under

    }
    #main {

    Any advice would be very much appreciated.

    I am also trying to put a border round the main white contents box of the site so that it appears whatever page you are on. I have managed to do this for a border for the slider but can’t figure it out for the main body box.

    Any suggestions??

    Thank you

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try using multiple background images on the body element
    https://css-tricks.com/stacking-order-of-multiple-backgrounds/

    Thread Starter andij731

    (@andij731)

    eek!! think this might be a bit advanced for me. Will look into it thought and see if I can get it too work.

    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I had to delete most of the HTML on your page (temporarily) so I could try out whether this is possible and yes, it looks pretty possible to me: https://awesomescreenshot.com/0e81p8928b , using the below code;

    body {
    background: url(/wp-content/uploads/2013/08/swirl1.png) top left no-repeat,
        url(/wp-content/uploads/2013/08/swirl2.png) top right no-repeat,
        url(/wp-content/uploads/2013/08/swirl4.png) bottom left no-repeat,
        url(/wp-content/uploads/2013/08/swirl3.png) bottom right no-repeat
}

    You just need to make sure a background image applied to another element within the <body> tag does not cover it, or your background manager plugin doesn’t cover it.

    Thread Starter andij731

    (@andij731)

    Thanks so much for your time and clear advice Andrew.

    I have tried what you suggested but unfortunately it didn’t work. I have taken a look to see if there is anything else in the body element that might be covering and I can’t see anything. The background plug in says ‘none (deactivated)’ so it cant be that. Is there anywhere else in the CSS I should be looking for something that might be covering it up the images I’m trying to install?
    I have copied my the ‘body’ from the css. Could you please take a look and see if you can see anything I’ve done wrong that I need to change?
    Thanks for being patient with a newbie and explaining your advice clearly for me.

    Cheers

    Andrea

    /* General
---------------------------------------- */
html,
body {
	min-width: 1092px;
}
body{
	background: #d5bfd6;
	position: relative;
	font: 100%/1.125em "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
	color: #d5bfd6;
}

body {
    background: url(/wp-content/uploads/2013/08/swirl1.png) top left no-repeat,
        url(/wp-content/uploads/2013/08/swirl2.png) top right no-repeat,
        url(/wp-content/uploads/2013/08/swirl4.png) bottom left no-repeat,
        url(/wp-content/uploads/2013/08/swirl3.png) bottom right no-repeat
}

#main {
	width: 100%;
	padding: 0 0 46px 0;
	overflow: hidden;
	font-size:.75em;
        border: 5px solid #b87bba;
}

#main-tail-ver {
	background: #d5bfd6;
}

#main-bg-top {
	background: #d5bfd6;
}

#main-bg-bot {
	background: #d5bfd6;
	width: 100%;
	overflow: hidden;
}

.container {
	width: 960px;
	margin: 0 auto;
	position:relative;
}

/* List styling */
dl dt {
	background:url(images/list-arrow.gif) no-repeat 0 3px;
	padding:0 0 3px 32px;
	margin-bottom:.2em;
	font-size:18px;
	line-height:1.2em;
	color:#b87bba;
}
dl dd {
	padding:0 0 0 32px;
	margin:0 0 1.5em 0;
	}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try adding this CSS too:

    #main-tail-ver,
#main-bg-top,
#main-bg-top,
#header,
#slider-wrapper,
#main-bg-bot { background: none !important; }

    Can you try deactivating your Custom Background plugin? Something is adding some painful CSS that is removing background image on the body element.

    Thread Starter andij731

    (@andij731)

    Thank you Andrew

    That has sort of worked as you can see the bottom of the swirls at the bottom of the page but not anything of the top.

    https://www.beauty-deals.co.uk/

    I have deactivated the custom background plug in.

    I have the ‘body styling’ and the ‘header background’ colours in ‘theme options’ set to my background lilac colour. Could that have anything to do with it?ain

    Do I need to change anything in the CSS under ‘content’ ie ‘primary content wrap’??

    Thanks again

    Andrea

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Could you replace this:

    body {
	#main-tail-ver,
	#main-bg-top,
	#main-bg-top,
	#header,
	#slider-wrapper { background: none; }
}

    With this:

    #main-tail-ver,
#main-bg-top,
#main-bg-top,
#header,
#slider-wrapper,
#main-bg-bot { background: none !important; }

    Thread Starter andij731

    (@andij731)

    Ta Andrew, thanks very much, that’s worked in putting the swirls in exactly where I want them. However its repositioned everything else on the site.

    https://www.beauty-deals.co.uk/

    Any suggestions?

    This is how my general code looks now.

    [CSS moderated. a link yo your site is all that is needed.]

    Really appreciate all the time you are giving me with this.

    Many Thanks

    Andrea

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Make sure you replace this explicitly:

    body {
	#main-tail-ver,
	#main-bg-top,
	#main-bg-top,
	#header,
	#slider-wrapper,
	#main-bg-bot { background: none !important;
}

    With this:

    #main-tail-ver,
#main-bg-top,
#main-bg-top,
#header,
#slider-wrapper,
#main-bg-bot { background: none !important; }

    Thread Starter andij731

    (@andij731)

    Wow wow wow.

    Brilliant, that’s done it.

    https://www.beauty-deals.co.uk/

    Thank you so so much Andrew

    So grateful for you time

    Andrea

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to insert images into corners of the site?’ is closed to new replies.