Ustawienie koloru dla tła na którym jest obrazek

0

Witam mam problem nie mogę ustawić koloru dla obrazka próbowałem na różne sposoby co może być przyczyną , że nie działa ?

background: red url(../images/hero-image.jpg) center no-repeat;
background-color: red;
background: url(../images/hero-image.jpg) center no-repeat;
background: red;
background: url(../images/hero-image.jpg) center no-repeat;
1

Pierwszy (edit. jednak pierwszy nie, ponieważ background nadpisze też background color) i drugi przypadek powinien działać, pokaż proszę ten przykład tutaj https://jsfiddle.net/

1

Sugeruję:

background-color:red;
background-image:url('../images/hero-image.jpg');
0

A tak w sumie jak mam rgba(0,0,0,.3) to czemu nie widać obrazka pod spodem ?

1

http://i63.tinypic.com/2v3j3wg.jpg

Używa jakiegoś zabezpieczenia przed hotlinkowaniem, przekierowania albo coś.
Wyświetli się jako:

<img src="http://i63.tinypic.com/2v3j3wg.jpg">

ale już nie jako:
background-image: url('http://i63.tinypic.com/2v3j3wg.jpg');
albo po zwykłym wpisaniu adresu w przeglądarce.

Najlepiej w ogóle nie ufaj zewnętrznym grafikom.

0

Mam ją tutaj tylko po to żeby na jsfiddle zademonstrować lokalnie mam normalnie, a wynik taki sam

.app-header {
    height: 100vh;
    background-color: rgba(0, 0, 0, .6);
    background-image: url(../images/hero-image.jpg) center no-repeat;
    background-size: cover;
    // background-attachment: fixed;
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
1

Nie możesz użyć takiego zapisu:
background-image: url('a.png') center no-repeat;

Jak chcesz zbiorczo deklarować parametry to:
background: url('a.png') center no-repeat;

0

Przy okazji, niepoprawne jest:
// background-attachment: fixed;
jedyny sposób wprowadzania komentarzy w CSS to:
/* background-attachment: fixed; */

0

Z tymi komentarzami to tak ale jakoś na szybko mi łatwiej ctrl + / a co do obrazka to ani tak:

background-color: rgba(0, 0, 0, .6);
background: url(../images/hero-image.jpg) center no-repeat;

ani tak:

background: rgba(0, 0, 0, .6) url(../images/hero-image.jpg) center no-repeat;

nie działa

0

Działa mi zarówno:

    background: rgba(0, 0, 0, .6) url(img/a.png) center no-repeat;

Jak i:

    background-color: rgba(0, 0, 0, .6);
    background: url(img/a.png) center no-repeat;
0

To ja już nie wiem co z moim komputerem jest nie tak

0

Obstawiam, że coś namotałeś ze ścieżką względną ../images/.
Zacznij od CSS osadzonego w HTML <style>(...)</style> i grafiki w tym samym katalogu, co plik HTML.
A jeśli nawet tak nie zadziała, zrób sobie:
<img src="hero-image.jpg">
i zobacz, czy grafika się w ogóle wyświetla.

0

ścieżka jest dobrze inaczej bym nie widział zdjęcia co do style to mam webpack-dev-server a tak w ogóle to z linear-gradientem zadziałało

background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(../images/hero-image.jpg) no-repeat 50% 50%;

1 użytkowników online, w tym zalogowanych: 0, gości: 1