How do I give text or an image a transparent background using CSS

0 votes
I want to select and set up a background image for the home page but however, despite the width being filled, the height is not by getting the image from the beginning of the screen. Is there a shortcoming in the code? Have I been missing the standard for images on flutter? Is there a difference of the screen resolutions depending on a person's mobile phone and do the images scale accordingly?

class BaseLayout extends StatelessWidget{ 
@override 
Widget build(BuildContext context){ 
return new Scaffold( 
body: new Container( 
child: new Column( 
mainAxisAlignment: MainAxisAlignment.start, 
children: [ 
new Image.asset("assets/images/bulb.jpg"
) 
]
)
)
);
}
}
Feb 1 in HTML by Soham
• 8,730 points
60 views

1 answer to this question.

0 votes

In order to ensure that your image has filled your entire screen, you could try to use a Decoration Image with a fit of BoxFit.cover for example:- 

class BaseLayout extends StatelessWidget{ 
@override 
Widget build(BuildContext context){ 
return Scaffold( 
body: Container( 
decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/images/bulb.jpg"), 
                        fit: BoxFit.cover, 
), 
), 
      child: null /* add child content here */, 
),
);
}
}
answered Feb 8 by Rahul
• 8,980 points

Related Questions In HTML

+1 vote
1 answer

How can i create simple register form using html and css?

Html5 contains lots of elements using which ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,680 points
2,883 views
0 votes
0 answers

How to do calculation in PHP using a csv file for retrieving data?

Morning, I have a csv file and i ...READ MORE

Feb 11, 2020 in HTML by anonymous
• 140 points
814 views
0 votes
1 answer

How to align a <div> to the middle (horizontally/width) of the page?

Hello Kartik, position: absolute and then top:50% and left:50% places the top edge ...READ MORE

answered Apr 23, 2020 in HTML by Niroj
• 82,680 points
179 views
0 votes
1 answer

unable to load image file using <img> tag

This error means that file was not ...READ MORE

answered Oct 7, 2020 in HTML by Niroj
• 82,680 points
2,183 views
0 votes
1 answer

How to Identify Web Element( Button) when there are multiple buttons without any ID

Hi Gangadhar, Do you need the HTML code to ...READ MORE

answered Feb 10, 2020 in HTML by Roshni
• 10,500 points
739 views
0 votes
1 answer

I've a query for <form>tag

That might be because button inside form ...READ MORE

answered Nov 2, 2020 in HTML by sindhu
185 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,340 points
1,484 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,340 points
372 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,340 points
2,343 views
0 votes
1 answer

How to create a function in Dart language?

Hi@akhtar, There are many function types available in ...READ MORE

answered Jul 22, 2020 in Others by MD
• 95,340 points
192 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP