Background linear gradient is not fully occupied

[dry pollen]

I tried to use background-image: linear-gradient(to right, #672280, #A626D3)

still aint working

[dry pollen]

@sand pelican

[sand pelican]

k here

what you are trying to do here

[dry pollen]

that image

[sand pelican]

it seems you have placed the image outside of this background image container

talking about logo

can i see the code

[dry pollen]

import React from "react";

export default function Header() {
return (
<header className="header">
<img className="h_image" src = "../images/trollface.png" alt = "troll" />
<h2 className="h_title">Meme Generator</h2>
<h4 className="h_project"> React Course - Project 3</h4>
</header>
)
}

sending code like this is not good is there any way to send code properly so that it can be readable

[sand pelican]

screenshots are good

what are the styles for them?

[dry pollen]

.header {
display: flex;
height: 65px;
align-items: center;
color: white;
background: linear-gradient(90deg, #672280 1.18%, #A626D3 100%);
}

[sand pelican]

<header className='header'>
  <div>
  <img src='your_image_path' />
  <h1>Meme Generator<h1>
 </div>

  <p>React Course-Project 3</p>

</header>

.header{
display:flex;
justify-content: space-between;
}

this should work

[sand pelican]

add the background now

[sand pelican]

your background color should work in your code as well, it seems you may have done something with other class styles , like maybe h_image, your logo is placed outside of the header container! but in your code the image is inside the header container

[dry pollen]

.h_image {
height: 100%;
margin-right: 6px;
}

.h_title {
font-size: 22px;
margin-right: auto;
}

.h_project {
font-size: 15px;
font-weight: 600;
}

these are other styles

[dry pollen]

actually i got that image from internet not from figma file

[sand pelican]

did your whole header container got the background color now

[dry pollen]

its coming like this when i download from figma

[sand pelican]

try re downloading it

[dry pollen]

i did 3 times

[sand pelican]

is it from the figma?

[dry pollen]

yeah

sometimes its coming black and sometimes white

[sand pelican]

weird

@Sai can you set it as normal background color like red and see if its being applied to whole container

[dry pollen]

now its fine bruh all set now actually i tried to download from the image itself in figma but now i downloaded from file its good now

[sand pelican]

also add some padding in .header

from all sides, so there should be breating room for content

[dry pollen]

yeah i remember now thnx for helping out all time 👍

[sand pelican]

no problem! 🙂

[dry pollen]

https://www.figma.com/file/MoLwFPHNHJVrzdFurxHzNV/Meme-Generator?type=design&node-id=0-1&t=VPsUOhInTNcWm4tm-0

can u go through this figma link see that button get a new meme same side u can see little image how can i get it

[sand pelican]

🖼

i just copied it as text , you can add it as text

[dry pollen]

its looking like this

[sand pelican]

you can add background color to it

to the button

it will come out well

[sand pelican]

perfect

[dry pollen]

@sand pelican is there anything like that if i click on the link it should open project

[sand pelican]

what you want to do

you can add a anchor tag and set the href to project url

[dry pollen]

i mean if i want to open project without vs code is there anything like that like domain or something

netlify

[sand pelican]

oh yea you need to host your site on Netlify

[dry pollen]

ohh k alr

[sand pelican]

see a video on hosting your react app via Netlify

on youtube, its easy to host react apps