Header Imag no repeat

dollsdresstoo · Member · Jul 7, 2018 at 9:36 pm
Copy link

Add topic to favorites
I have tried many ways to write this CSS and nothing works… What is the right line for header image to not repeat past home page?

Judy

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 8, 2018 at 2:12 am
Copy link
Hi there, this hides the header image on all but your home page.
```
body:not(.home) .site-header .header-image {
  display: none;
}
```
dollsdresstoo · Member · Jul 8, 2018 at 2:52 pm
Copy link
no that has no effect on my header image – nothing changes. I have tried probably about 20 different lines that I find in different places. There is only one that does remove it however it removes everything at the top of the page
.site-header {display:none}

Thank you from judy
dollsdresstoo · Member · Jul 8, 2018 at 3:00 pm
Copy link
I tried it again maybe I fixed a mistake i had made and yes it works!
I have some ?s – where can I find the CSS lines I need to make changes in the defaults? Also why is it sometimes that we start the line with . and sometimes we dont start it with a dot?
many many thanks
I have tried this so many times

from Judy
kokkieh · Staff · Jul 8, 2018 at 6:04 pm
Copy link
Hi Judy,

Glad to hear you got it working.

where can I find the CSS lines I need to make changes in the defaults?

You need to look in your browser inspector to get that. While viewing your site, right-click on the thing you want to change, and then click Inspect. That will open a panel in your browser showing you the HTML for your page, with the CSS code that controls how the specific element you selected looks.

We have a tutorial on how to find this here:

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

Also why is it sometimes that we start the line with . and sometimes we dont start it with a dot?

In the HTML code for your site each element on the site has a set of unique markers that identify it. In CSS we call these selectors. The ones with a . are called classes, and the ones with a # are called ids, and then you can also use regular HTML elements – those are the ones without dots. You use these selectors to tell the CSS code exactly what it is supposed to change.

I know this sounds very complicated, but it’s actually quite fun to work with once you learn a bit about it. If you’re interested in that, we have several tutorials linked at the bottom of this page:

https://en.support.wordpress.com/custom-design/css-basics/

Of course, you’re also welcome to ask us here or via live chat/email should you need any help with CSS code on your site.
dollsdresstoo · Member · Jul 8, 2018 at 9:06 pm
Copy link
I did inspect the element in both html on left and on right CSS. Nowhere did I see anything like the CSS line you gave me. I saw height and width and so I think I can change the width??
To say this is confusing and complicated doesnt begin to describe the experience.
So if I want to change the width of the header image from 1200 to 900 (I think that is px)
what is the line to use in CSS?

What is really confusing is that this is html not css – there is nothing on the right side/CSS to copy except a few short lists
I thank you
from judy
dollsdresstoo · Member · Jul 8, 2018 at 9:07 pm
Copy link
I just saw that image and I dont know what happened that width did shrink and I didnt write any lines of CSS

Judy
kokkieh · Staff · Jul 9, 2018 at 6:45 am
Copy link
So if I want to change the width of the header image from 1200 to 900 (I think that is px)
what is the line to use in CSS?

This should work – I added the margin line there so the image will still be centered on the page. You can just remove that line if you want the image left-aligned instead:
```
/*
Reduce header image width and center
*/
.header-image {
	max-width: 900px;
	margin: auto;
}
```
I did inspect the element in both html on left and on right CSS. Nowhere did I see anything like the CSS line you gave me.

What is really confusing is that this is html not css – there is nothing on the right side/CSS to copy except a few short lists

HTML and CSS work together – HTML determines what is there on the page, and CSS controls how it looks. So you need to click on a specific line of HTML in the left panel of the browser inspector, to see the CSS that controls how that element looks on the right.

However, you will see that the HTML has a nested structure, with elements appearing inside elements, appearing inside elements. So sometimes you need to start a few levels above the element you want to change to find the proper grouping of selectors to target that specific element, and to see all the levels of existing CSS that controls the appearance of that element.

Again, it sounds complicated, and it is, but the more you learn and the more you practice, the more it will start to make sense to you.
dollsdresstoo · Member · Jul 9, 2018 at 2:45 pm
Copy link
I thank you and I am unable to do this without your help and I try many many lines that I find on various sites yet nothing works.
I tried about 5 different lines for this – header image with navy blue border about 2px.
I do not understand which items get the distinction of class or which are selectors and which start with /* or # or a dot or nothing.
I was tho able to reduce size of the header image with your line of code.

Judy
dollsdresstoo · Member · Jul 9, 2018 at 2:57 pm
Copy link
I found a line of CSS to use for the border and its working. So maybe sometime it will begin to be something I really understand. For now its a matter of someone giving me the line of CSS to use and trying it and maybe it works.
Thank you from Judy
staff-zinnia · Staff · Jul 9, 2018 at 3:02 pm
Copy link
Hi Judy –

Happy that we could help. It does take quite a bit of practice to become efficient with using CSS alterations. There are some free online tutorials that you can find if you want to keep working on that.
dollsdresstoo · Member · Jul 10, 2018 at 3:59 am
Copy link
I read everything I can find online and also library books. So far it doesnt make much sense to me so I just keep trying different CSS alterations I find and wait to see what will work. All of them from your people do work.

thank you from judy
kokkieh · Staff · Jul 10, 2018 at 6:32 am
Copy link
If you’re serious about learning more, consider doing the HTML and CSS courses on https://www.freecodecamp.org/. It’s completely free and will help you master the basics very quickly through a series of practical exercises.

No items found.